@khanacademy/perseus 19.0.0 → 19.1.1

package/dist/es/index.js

@@ -19,6 +19,7 @@ import PropTypes from 'prop-types';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import { number, point, vector as vector$1, line } from '@khanacademy/kmath';
+import { entries, keys } from '@khanacademy/wonder-stuff-core';
 import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
 import SimpleMarkdown from '@khanacademy/simple-markdown';
 import { pureMarkdownRules } from '@khanacademy/pure-markdown';
@@ -35,7 +36,6 @@ import { Popper } from 'react-popper';
 import createReactClass from 'create-react-class';
 import Link from '@khanacademy/wonder-blocks-link';
 import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
-import { keys } from '@khanacademy/wonder-stuff-core';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -140,9 +140,9 @@ class MathInput extends React.Component {
                 // We do this by modifying internal MathQuill state
                 // directly, instead of waiting for `.latex()` to be
                 // called in `componentDidUpdate()`.
-                const left = mathField.__controller.cursor[mathQuillInstance.L];
+                const left = mathField.cursor()[mathQuillInstance.L];
                 if (left && left.ctrlSeq === "\\cdot ") {
-                  mathField.__controller.backspace();
+                  mathField.controller().backspace();
                   mathField.cmd("\\times");
                 }
               } else {
@@ -1202,6 +1202,12 @@ const KhanMath = {
     return String(number$1);
   }
 };
+function sum$1(array) {
+  return array.reduce(add$3, 0);
+}
+function add$3(a, b) {
+  return a + b;
+}
 
 /* eslint-disable no-useless-escape */
 const MAXERROR_EPSILON = Math.pow(2, -42);
@@ -1894,27 +1900,6 @@ const KhanAnswerTypes = {
 const _excluded$4 = ["scoring"];
 const ERROR_TITLE = i18n._("Oops!");
 const ERROR_MESSAGE = i18n._("Sorry, I don't understand that!");
-const insertBraces = value => {
-  // HACK(alex): Make sure that all LaTeX super/subscripts are wrapped
-  // in curly braces to avoid the mismatch between KAS and LaTeX sup/sub
-  // parsing.
-  //
-  // What exactly is this mismatch? Due to its heritage of parsing plain
-  // text math from <OldExpression />, KAS parses "x^12" as x^(12).
-  // This is both generally what the user expects to happen, and is
-  // consistent with other computer algebra systems. It is NOT
-  // consistent with LaTeX however, where x^12 is equivalent to x^{1}2.
-  //
-  // Since the only LaTeX we parse comes from MathQuill, this wouldn't
-  // be a problem if MathQuill just always gave us the latter version
-  // (with explicit braces). However, instead it always gives the former.
-  // This behavior is baked in pretty deep; my naive attempts at changing
-  // it triggered all sorts of confusing errors. So instead we just make
-  // sure to add in any missing braces before grading MathQuill input.
-  //
-  // TODO(alex): Properly hack MathQuill to always use explicit braces.
-  return value.replace(/([_^])([^{])/g, "$1{$2}");
-};
 const anglicizeOperators = tex => {
   // sen is used instead of sin in some languages, e.g. Portuguese.
   // To ensure that answers in various languages are graded correctly, we
@@ -1922,7 +1907,7 @@ const anglicizeOperators = tex => {
   return tex.replace(/\\operatorname{sen}/g, "\\sin ");
 };
 const normalizeTex = tex => {
-  return anglicizeOperators(insertBraces(tex));
+  return anglicizeOperators(tex);
 };
 const deriveKeypadVersion = apiOptions => {
   // We can derive which version of the keypad is in use. This is
@@ -8700,54 +8685,6 @@ function polar(r, th) {
   th = th * Math.PI / 180;
   return [r[0] * Math.cos(th), r[1] * Math.sin(th)];
 }
-const GraphUtils = {
-  unscaledSvgPath: function (points) {
-    // If this is an empty closed path, return "" instead of "z", which
-    // would give an error
-    if (points[0] === true) {
-      return "";
-    }
-    return $.map(points, function (point, i) {
-      if (point === true) {
-        return "z";
-      }
-      return (i === 0 ? "M" : "L") + point[0] + " " + point[1];
-    }).join("");
-  },
-  getDistance: function (point1, point2) {
-    return point.distanceToPoint(point1, point2);
-  },
-  /**
-   * Return the difference between two sets of coordinates
-   */
-  coordDiff: function (startCoord, endCoord) {
-    return _.map(endCoord, function (val, i) {
-      return endCoord[i] - startCoord[i];
-    });
-  },
-  /**
-   * Round the given coordinates to a given snap value
-   * (e.g., nearest 0.2 increment)
-   */
-  snapCoord: function (coord, snap) {
-    return _.map(coord, function (val, i) {
-      return KhanMath.roundToNearest(snap[i], val);
-    });
-  },
-  // Find the angle in degrees between two or three points
-  findAngle: function (point1, point2, vertex) {
-    if (vertex === undefined) {
-      const x = point1[0] - point2[0];
-      const y = point1[1] - point2[1];
-      if (!x && !y) {
-        return 0;
-      }
-      return (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
-    }
-    return GraphUtils.findAngle(point1, vertex) - GraphUtils.findAngle(point2, vertex);
-  },
-  graphs: {}
-};
 var _bounds = /*#__PURE__*/_classPrivateFieldKey("bounds");
 var _drawingTransform = /*#__PURE__*/_classPrivateFieldKey("drawingTransform");
 class Graphie$1 {
@@ -8776,8 +8713,59 @@ class Graphie$1 {
     // Refactor to accessor methods that look at this.dimensions.
     this.xpixels = void 0;
     this.ypixels = void 0;
+    this.label = (point, text, direction, arg4, arg5) => {
+      const style = typeof arg4 === "object" ? arg4 : arg5;
+      const latex = typeof arg4 === "boolean" ? arg4 : true;
+      return this.withStyle(style, () => {
+        const $span = $("<span>").addClass("graphie-label");
+        const pad = this.currentStyle["label-distance"];
+        $span.css({
+          position: "absolute",
+          padding: (pad != null ? pad : 7) + "px",
+          color: "black"
+        }).data("labelDirection", direction).appendTo(this.el);
+
+        // @ts-expect-error - TS2339 - Property 'setPosition' does not exist on type 'JQuery<HTMLElement>'.
+        $span.setPosition = point => {
+          const scaledPoint = this.scalePoint(point);
+          $span.css({
+            left: scaledPoint[0],
+            top: scaledPoint[1]
+          });
+        };
+
+        // @ts-expect-error - TS2339 - Property 'setPosition' does not exist on type 'JQuery<HTMLElement>'.
+        $span.setPosition(point);
+        const span = $span[0];
+
+        // @ts-expect-error - TS2339 - Property 'processMath' does not exist on type 'JQuery<HTMLElement>'.
+        $span.processMath = function (math, force) {
+          processMath$1(span, math, force, function () {
+            const width = span.scrollWidth;
+            const height = span.scrollHeight;
+            setLabelMargins(span, [width, height]);
+          });
+        };
+
+        // @ts-expect-error - TS2339 - Property 'processText' does not exist on type 'JQuery<HTMLElement>'.
+        $span.processText = function (text) {
+          $span.html(text);
+          const width = span.scrollWidth;
+          const height = span.scrollHeight;
+          setLabelMargins(span, [width, height]);
+        };
+        if (latex) {
+          // @ts-expect-error - TS2339 - Property 'processMath' does not exist on type 'JQuery<HTMLElement>'.
+          $span.processMath(text, /* force */false);
+        } else {
+          // @ts-expect-error - TS2339 - Property 'processText' does not exist on type 'JQuery<HTMLElement>'.
+          $span.processText(text);
+        }
+        return $span;
+      });
+    };
     this.svgPath = (points, alreadyScaled) => {
-      return $.map(points, (point, i) => {
+      return points.map((point, i) => {
         if (point === true) {
           return "z";
         }
@@ -8793,7 +8781,6 @@ class Graphie$1 {
       // If points are collinear, plot a line instead
       if (a === 0) {
         const _points = [[this.bounds().xMin, computeParabola(this.bounds().xMin)], [this.bounds().xMax, computeParabola(this.bounds().xMax)]];
-        // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
         return this.svgPath(_points);
       }
 
@@ -8818,9 +8805,8 @@ class Graphie$1 {
       const right = [vertex[0] + dx, point[1]];
 
       // Scale and bound
-      // @ts-expect-error - TS2345 - Argument of type '(point: number | Coord) => Coord' is not assignable to parameter of type 'Iteratee<any[][], any, any[]>'.
-      const points = _.map([left, control, right], this.scalePoint);
-      const values = _.map(_.flatten(points), KhanMath.bound);
+      const points = [left, control, right].map(this.scalePoint);
+      const values = points.flat().map(KhanMath.bound);
       return "M" + values[0] + "," + values[1] + " Q" + values[2] + "," + values[3] + " " + values[4] + "," + values[5];
     };
     this.svgSinusoidPath = (a, b, c, d) => {
@@ -8842,10 +8828,8 @@ class Graphie$1 {
         // See: http://stackoverflow.com/questions/13932704/how-to-draw-sine-waves-with-svg-js
         const xCoords = [x0, x0 * 2 / 3 + x1 * 1 / 3, x0 * 1 / 3 + x1 * 2 / 3, x1];
         const yCoords = [computeSine(x0), computeSine(x0) + computeDerivative(x0) * (x1 - x0) / 3, computeSine(x1) - computeDerivative(x1) * (x1 - x0) / 3, computeSine(x1)];
-
-        // Zip and scale
-        // @ts-expect-error - TS2345 - Argument of type '(point: number | Coord) => Coord' is not assignable to parameter of type 'Iteratee<any[][], any, any[]>'.
-        return _.map(_.zip(xCoords, yCoords), this.scalePoint);
+        const points = vector$1.zip(xCoords, yCoords);
+        return points.map(this.scalePoint);
       };
 
       // How many quarter-periods do we need to span the graph?
@@ -8886,6 +8870,7 @@ class Graphie$1 {
     $(el).children("div").css("position", "absolute");
   }
   init(options) {
+    var _options$isMobile;
     let scale = options.scale || [40, 40];
     scale = typeof scale === "number" ? [scale, scale] : scale;
     if (options.range == null) {
@@ -8905,7 +8890,7 @@ class Graphie$1 {
     this.dimensions = [w, h];
     this.xpixels = w;
     this.ypixels = h;
-    this.isMobile = options.isMobile;
+    this.isMobile = (_options$isMobile = options.isMobile) != null ? _options$isMobile : false;
     return this;
   }
 
@@ -8923,33 +8908,24 @@ class Graphie$1 {
   // - xLabelFormat: fn to format label string for x-axis
   graphInit(options) {
     options = options || {};
-    $.each(options, function (prop, val) {
+    for (const [prop, val] of entries(options)) {
       // allow options to be specified by a single number for shorthand if
       // the horizontal and vertical components are the same
-      if (
-      // @ts-expect-error - TS2339 - Property 'match' does not exist on type 'string | number | symbol'.
-      !prop.match(/.*Opacity$/) && prop !== "range" && typeof val === "number") {
+      if (!prop.match(/.*Opacity$/) && prop !== "range" && typeof val === "number") {
         options[prop] = [val, val];
       }
 
       // allow symmetric ranges to be specified by the absolute values
       if (prop === "range" || prop === "gridRange") {
-        if (val.constructor === Array) {
-          // but don't mandate symmetric ranges
-          if (val[0].constructor !== Array) {
-            options[prop] = [[-val[0], val[0]], [-val[1], val[1]]];
-          }
-        } else if (typeof val === "number") {
-          options[prop] = [[-val, val], [-val, val]];
-        }
+        options[prop] = normalizeRange(options[prop]);
       }
-    });
-    const range = options.range || [[-10, 10], [-10, 10]];
-    const gridRange = options.gridRange || options.range;
+    }
+    const range = normalizeRange(options.range || [[-10, 10], [-10, 10]]);
+    const gridRange = normalizeRange(options.gridRange || range);
     const scale = options.scale || [20, 20];
     const grid = options.grid != null ? options.grid : true;
     const gridOpacity = options.gridOpacity || 0.1;
-    const gridStep = options.gridStep || [1, 1];
+    const gridStep = toPair(options.gridStep || [1, 1]);
     const axes = options.axes != null ? options.axes : true;
     const axisArrows = options.axisArrows || "";
     const axisOpacity = options.axisOpacity || 1.0;
@@ -8969,7 +8945,7 @@ class Graphie$1 {
     let xLabelFormat = options.xLabelFormat || labelFormat;
     let yLabelFormat = options.yLabelFormat || labelFormat;
     const realRange = [[range[0][0] - (range[0][0] > 0 ? 1 : 0), range[0][1] + (range[0][1] < 0 ? 1 : 0)], [range[1][0] - (range[1][0] > 0 ? 1 : 0), range[1][1] + (range[1][1] < 0 ? 1 : 0)]];
-    if (!_.isArray(unityLabels)) {
+    if (!Array.isArray(unityLabels)) {
       unityLabels = [unityLabels, unityLabels];
     }
     const minusIgnorer = function minusIgnorer(lf) {
@@ -9044,7 +9020,7 @@ class Graphie$1 {
         stroke: options.isMobile ? KhanColors.GRAY_G : "#000000",
         opacity: options.isMobile ? 1 : tickOpacity,
         strokeWidth: 1
-      }, function () {
+      }, () => {
         // horizontal axis
         let step = gridStep[0] * tickStep[0];
         let len = tickLen[0] / scale[1];
@@ -9071,13 +9047,11 @@ class Graphie$1 {
         if (range[0][0] < 0 && range[0][1] > 0) {
           for (let y = step + axisCenter[1]; y <= stop; y += step) {
             if (y < stop || !axisArrows) {
-              // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
               this.line([-len + axisCenter[0], y], [halfWidthTicks ? 0 : len + axisCenter[0], y]);
             }
           }
           for (let y = -step + axisCenter[1]; y >= start; y -= step) {
             if (y > start || !axisArrows) {
-              // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
               this.line([-len + axisCenter[0], y], [halfWidthTicks ? 0 : len + axisCenter[0], y]);
             }
           }
@@ -9153,155 +9127,346 @@ class Graphie$1 {
     const processed = this.processAttributes(attrs);
     if (typeof fn === "function") {
       const oldStyle = this.currentStyle;
-      this.currentStyle = $.extend({}, this.currentStyle, processed);
+      this.currentStyle = _extends({}, this.currentStyle, processed);
       const result = fn.call(this);
       this.currentStyle = oldStyle;
       return result;
     }
-    $.extend(this.currentStyle, processed);
+    Object.assign(this.currentStyle, processed);
+  }
+  grid(xr, yr, style) {
+    return this.withStyle(style, () => {
+      const step = this.currentStyle.step || [1, 1];
+      const set = this.raphael.set();
+      let x = step[0] * Math.ceil(xr[0] / step[0]);
+      for (; x <= xr[1]; x += step[0]) {
+        set.push(this.line([x, yr[0]], [x, yr[1]]));
+      }
+      let y = step[1] * Math.ceil(yr[0] / step[1]);
+      for (; y <= yr[1]; y += step[1]) {
+        set.push(this.line([xr[0], y], [xr[1], y]));
+      }
+      return set;
+    });
+  }
+  arc(center, radius, startAngle, endAngle, sector, style) {
+    return this.withStyle(style, () => {
+      startAngle = (startAngle % 360 + 360) % 360;
+      endAngle = (endAngle % 360 + 360) % 360;
+      const cent = this.scalePoint(center);
+      const radii = this.scaleVector(radius);
+      const startVector = polar(radius, startAngle);
+      const endVector = polar(radius, endAngle);
+
+      // We round the coordinates to make testing easier, because trig
+      // operations return unround numbers.
+      // TODO(benchristel): move rounding to scalePoint?
+      const round = x => number.round(x, 6);
+      const startPoint = this.scalePoint([round(center[0] + startVector[0]), round(center[1] + startVector[1])]);
+      const endPoint = this.scalePoint([round(center[0] + endVector[0]), round(center[1] + endVector[1])]);
+      const largeAngle = ((endAngle - startAngle) % 360 + 360) % 360 > 180;
+      return this.raphael.path("M" + startPoint.join(" ") + "A" + radii.join(" ") + " 0 " + (
+      // ellipse rotation
+      largeAngle ? 1 : 0) + " 0 " +
+      // sweep flag
+      endPoint.join(" ") + (sector ? "L" + cent.join(" ") + "z" : ""));
+    });
+  }
+  circle(center, radius, style) {
+    return this.withStyle(style, () => this.raphael.ellipse(...this.scalePoint(center), ...this.scaleVector([radius, radius])));
   }
-  label(point, text, direction, latex) {}
-  grid(xr, yr, styleAttributes) {}
 
-  // path is a stub that gets overwritten with a function from drawingTools
-  // in createGraphie
-  path(points) {}
+  // (x, y) is coordinate of bottom left corner
+  rect(x, y, width, height, style) {
+    return this.withStyle(style, () => {
+      // Raphael needs (x, y) to be coordinate of upper left corner
+      const corner = this.scalePoint([x, y + height]);
+      const dims = this.scaleVector([width, height]);
+      const elem = this.raphael.rect(...corner.concat(dims));
+      if (this.isMobile) {
+        elem.node.style.shapeRendering = "crispEdges";
+      }
+      return elem;
+    });
+  }
+  ellipse(center, radii, style) {
+    return this.withStyle(style, () => this.raphael.ellipse(...this.scalePoint(center).concat(this.scaleVector(radii))));
+  }
+  fixedEllipse(center,
+  // Different type than Coord, this is radiusX, radiusY
+  radii, maxScale, padding, style) {
+    return this.withStyle(style, () => {
+      // Scale point and radius
+      const scaledPoint = this.scalePoint(center);
+      const scaledRadii = this.scaleVector(radii);
+      const width = 2 * scaledRadii[0] * maxScale + padding;
+      const height = 2 * scaledRadii[1] * maxScale + padding;
+
+      // Calculate absolute left, top
+      const left = scaledPoint[0] - width / 2;
+      const top = scaledPoint[1] - height / 2;
+
+      // Wrap in <div>
+      const wrapper = document.createElement("div");
+      $(wrapper).css({
+        position: "absolute",
+        width: width + "px",
+        height: height + "px",
+        left: left + "px",
+        top: top + "px"
+      });
+      // wrapper.setAttribute("data-graphie-type", "ellipse");
 
-  // line is a stub that gets overwritten with a function from drawingTools
-  // in createGraphie
-  line(start, end) {}
-  processAttributes(attrs) {
-    const transformers = {
-      scale: scale => {
-        this.drawingTransform().setScale(scale);
-      },
-      clipRect: pair => {
-        const point = pair[0];
-        const size = pair[1];
-        point[1] += size[1]; // because our coordinates are flipped
+      // Create Raphael canvas
+      const localRaphael = raphael.exports(wrapper, width, height);
+      const visibleShape = localRaphael.ellipse(width / 2, height / 2, scaledRadii[0], scaledRadii[1]);
+      return {
+        wrapper: wrapper,
+        visibleShape: visibleShape
+      };
+    });
+  }
+  unstyledPath(points) {
+    const p = this.raphael.path(this.svgPath(points));
+    p.graphiePath = points;
+    return p;
+  }
+  path(points, style) {
+    return this.withStyle(style, () => {
+      return this.unstyledPath(points);
+    });
+  }
 
-        return {
-          "clip-rect": this.scalePoint(point).concat(this.scaleVector(size)).join(" ")
-        };
-      },
-      strokeWidth: function (val) {
-        return {
-          "stroke-width": parseFloat(val)
-        };
-      },
-      rx: val => {
-        return {
-          rx: this.scaleVector([val, 0])[0]
-        };
-      },
-      ry: val => {
-        return {
-          ry: this.scaleVector([0, val])[1]
-        };
-      },
-      r: val => {
-        const scaled = this.scaleVector([val, val]);
-        return {
-          rx: scaled[0],
-          ry: scaled[1]
-        };
-      }
+  // fixedPath is a stub that gets overwritten with a function from
+  // drawingTools in createGraphie
+  fixedPath(points, center, createPath) {
+    points = points.map(this.scalePoint);
+    center = center ? this.scalePoint(center) : null;
+    createPath = createPath || this.svgPath;
+
+    // Compute bounding box
+    const xs = points.map(p => p[0]);
+    const ys = points.map(p => p[1]);
+    const pathLeft = Math.min(...xs);
+    const pathRight = Math.max(...xs);
+    const pathTop = Math.min(...ys);
+    const pathBottom = Math.max(...ys);
+
+    // Apply padding to line
+    const padding = [4, 4];
+
+    // Calculate and apply additional offset
+    const topLeftOfBoundingBox = [pathLeft, pathTop];
+
+    // Apply padding and offset to points to convert from
+    // canvas coordinates to pixel coordinates relative to bounding box
+    points = points.map(function (point) {
+      return vector$1.add(vector$1.subtract(point, topLeftOfBoundingBox), vector$1.scale(padding, 0.5));
+    });
+
+    // Calculate <div> dimensions
+    const width = pathRight - pathLeft + padding[0];
+    const height = pathBottom - pathTop + padding[1];
+    const left = topLeftOfBoundingBox[0] - padding[0] / 2;
+    const top = topLeftOfBoundingBox[1] - padding[1] / 2;
+
+    // Create <div>
+    const wrapper = document.createElement("div");
+    $(wrapper).css({
+      position: "absolute",
+      width: width + "px",
+      height: height + "px",
+      left: left + "px",
+      top: top + "px",
+      // If user specified a center, set it
+      // NOTE(kevinb): jQuery doesn't like that `transformOrigin `could be `null`
+      // so we cast to `any` here.
+      transformOrigin: center ? width / 2 + center[0] + "px " + (height / 2 + center[1]) + "px" : null
+    });
+
+    // Create Raphael canvas
+    const localRaphael = raphael.exports(wrapper, width, height);
+
+    // Calculate path
+    const visibleShape = localRaphael.path(createPath(points));
+    return {
+      wrapper: wrapper,
+      visibleShape: visibleShape
     };
-    const processed = {};
-    $.each(attrs || {}, function (key, value) {
-      const transformer = transformers[key];
-      if (typeof transformer === "function") {
-        $.extend(processed, transformer(value));
-      } else {
-        const dasherized = key
-        // @ts-expect-error - TS2339 - Property 'replace' does not exist on type 'string | number | symbol'.
-        .replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2").replace(/([a-z\d])([A-Z])/g, "$1-$2").toLowerCase();
-        processed[dasherized] = value;
+  }
+  scaledPath(points, style) {
+    return this.withStyle(style, () => {
+      const p = this.raphael.path(this.svgPath(points, /* alreadyScaled */true));
+      p.graphiePath = points;
+      return p;
+    });
+  }
+  line(start, end, style) {
+    return this.withStyle(style, () => {
+      const l = this.unstyledPath([start, end]);
+      if (this.isMobile) {
+        l.node.style.shapeRendering = "crispEdges";
       }
+      return l;
     });
-    return processed;
   }
-}
-GraphUtils.Graphie = Graphie$1;
-const labelDirections = {
-  center: [-0.5, -0.5],
-  above: [-0.5, -1.0],
-  "above right": [0.0, -1.0],
-  right: [0.0, -0.5],
-  "below right": [0.0, 0.0],
-  below: [-0.5, 0.0],
-  "below left": [-1.0, 0.0],
-  left: [-1.0, -0.5],
-  "above left": [-1.0, -1.0]
-};
+  parabola(a, b, c, style) {
+    return this.withStyle(style, () => this.raphael.path(this.svgParabolaPath(a, b, c)));
+  }
+  fixedLine(start, end, thickness) {
+    // Apply padding to line
+    const padding = [thickness, thickness];
 
-/**
- * Safari applies some SVG-specific styles to things that are not SVGs, so we
- * need to exclude those styles from things that are not SVGs.
- *
- * To see this behavior in action, open https://codepen.io/anon/pen/zENEoa in
- * Safari.
- *
- * Usage `$.extend({}, someStyles, SVG_SPECIFIC_STYLE_MASK)`
- */
-const SVG_SPECIFIC_STYLE_MASK = {
-  "stroke-width": null
-};
-GraphUtils.createGraphie = function (el) {
-  const thisGraphie = new Graphie$1(el);
-  const setLabelMargins = function setLabelMargins(span, size) {
-    const $span = $(span);
-    const direction = $span.data("labelDirection");
-    let [width, height] = size;
-    // This can happen when a span
-    // is invisible but we still want to update the CSS. At worst, we will
-    // be off by a few pixels instead of in a different position entirely.
-    if (width === 0 && height === 0) {
-      [width, height] = [1, 1];
-      Log.log("Label size was 0x0 in graphie.js; using 1x1 instead");
-    }
-    $span.css("visibility", "");
-    if (typeof direction === "number") {
-      const x = Math.cos(direction);
-      const y = Math.sin(direction);
-      const scale = Math.min(width / 2 / Math.abs(x), height / 2 / Math.abs(y));
-      $span.css({
-        marginLeft: -width / 2 + x * scale,
-        marginTop: -height / 2 - y * scale
-      });
-    } else {
-      const multipliers = labelDirections[direction || "center"];
-      $span.css({
-        marginLeft: Math.round(width * multipliers[0]),
-        marginTop: Math.round(height * multipliers[1])
-      });
-    }
-  };
+    // Scale points to get values in pixels
+    start = this.scalePoint(start);
+    end = this.scalePoint(end);
+
+    // Calculate and apply additional offset
+    const extraOffset = [Math.min(start[0], end[0]), Math.min(start[1], end[1])];
+
+    // Apply padding and offset to start, end points
+    start = vector$1.add(vector$1.subtract(start, extraOffset), vector$1.scale(padding, 0.5));
+    end = vector$1.add(vector$1.subtract(end, extraOffset), vector$1.scale(padding, 0.5));
 
-  // `svgPath` is independent of graphie range, so we export it independently
-  GraphUtils.svgPath = thisGraphie.svgPath;
-  const addArrowheads = function arrows(path) {
+    // Calculate <div> dimensions
+    const left = extraOffset[0] - padding[0] / 2;
+    const top = extraOffset[1] - padding[1] / 2;
+    const width = Math.abs(start[0] - end[0]) + padding[0];
+    const height = Math.abs(start[1] - end[1]) + padding[1];
+
+    // Create <div>
+    const wrapper = document.createElement("div");
+    $(wrapper).css({
+      position: "absolute",
+      width: width + "px",
+      height: height + "px",
+      left: left + "px",
+      top: top + "px",
+      // Outsiders should feel like the line's 'origin' (i.e., for
+      // rotation) is the starting point
+      transformOrigin: start[0] + "px " + start[1] + "px"
+    });
+
+    // Create Raphael canvas
+    const localRaphael = raphael.exports(wrapper, width, height);
+
+    // Calculate path
+    const path = "M" + start[0] + " " + start[1] + " " + "L" + end[0] + " " + end[1];
+    const visibleShape = localRaphael.path(path);
+    visibleShape.graphiePath = [start, end];
+    return {
+      wrapper: wrapper,
+      visibleShape: visibleShape
+    };
+  }
+  sinusoid(a, b, c, d, style) {
+    return this.withStyle(style, () =>
+    // Plot a sinusoid of the form: f(x) = a * sin(b * x - c) + d
+    this.raphael.path(this.svgSinusoidPath(a, b, c, d)));
+  }
+  plotParametric(fn, range, style) {
+    return this.withStyle(style, () => {
+      // We truncate to 500,000, since anything bigger causes
+      // overflow in the firefox svg renderer.  This is safe
+      // since 500,000 is outside the viewport anyway.  We
+      // write these functions the way we do to handle undefined.
+      const clip = xy => {
+        if (Math.abs(xy[1]) > 500000) {
+          return [xy[0], Math.min(Math.max(xy[1], -500000), 500000)];
+        }
+        return xy;
+      };
+      const clippedFn = x => clip(fn(x));
+      const min = range[0];
+      const max = range[1];
+      let step = (max - min) / (this.currentStyle["plot-points"] || 800);
+      if (step === 0) {
+        step = 1;
+      }
+      const paths = this.raphael.set();
+      let points = [];
+      let lastY = clippedFn(min)[1];
+      for (let t = min; t <= max; t += step) {
+        const point = clippedFn(t);
+        const y = point[1];
+
+        // Find points where it flips
+        if (
+        // if there is an asymptote here, meaning that the graph
+        // switches signs and has a large difference
+        y > 0 !== lastY > 0 && Math.abs(y - lastY) > 2 * this.drawingTransform().pixelsPerUnitY() ||
+        // or the function is undefined
+        isNaN(y)) {
+          // split the path at this point, and draw it
+          paths.push(this.unstyledPath(points));
+          // restart the path, excluding this point
+          points = [];
+        } else {
+          // otherwise, just add the point to the path
+          points.push(point);
+        }
+        lastY = y;
+      }
+      paths.push(this.unstyledPath(points));
+      return paths;
+    });
+  }
+  plot(fn, range, style) {
+    return this.withStyle(style, () => {
+      const min = range[0];
+      const max = range[1];
+      if (!this.currentStyle["plot-points"]) {
+        this.currentStyle["plot-points"] = 2 * (max - min) * this.drawingTransform().pixelsPerUnitX();
+      }
+      const parametricFn = x => [x, fn(x)];
+      return this.plotParametric(parametricFn, range);
+    });
+  }
+  withStyle(style, fn) {
+    const oldStyle = this.currentStyle;
+    this.currentStyle = _extends({}, this.currentStyle, this.processAttributes(style));
+    const result = this.postprocessDrawingResult(fn());
+    this.currentStyle = oldStyle;
+    return result;
+  }
+  postprocessDrawingResult(result) {
+    // Bad heuristic for recognizing Raphael elements and sets
+    const type = result.constructor.prototype;
+    if (type === raphael.exports.el || type === raphael.exports.st) {
+      result.attr(this.currentStyle);
+      if (this.currentStyle.arrows) {
+        result = this.addArrowheads(result);
+      }
+    } else if (result instanceof $) {
+      // We assume that if it's not a Raphael element/set, it
+      // does not contain SVG.
+      // @ts-expect-error - TS2339 - Property 'css' does not exist on type '{}'.
+      result.css(_extends({}, this.currentStyle, SVG_SPECIFIC_STYLE_MASK));
+    }
+    return result;
+  }
+  addArrowheads(path) {
     const type = path.constructor.prototype;
     if (type === raphael.exports.el) {
       if (path.type === "path" && typeof path.arrowheadsDrawn === "undefined") {
         const w = path.attr("stroke-width");
         const s = 0.6 + 0.4 * w;
         const l = path.getTotalLength();
-        const set = thisGraphie.raphael.set();
-        const head = thisGraphie.raphael.path(thisGraphie.isMobile ? "M-4,4 C-4,4 -0.25,0 -0.25,0 C-0.25,0 -4,-4 -4,-4" : "M-3 4 C-2.75 2.5 0 0.25 0.75 0C0 -0.25 -2.75 -2.5 -3 -4");
+        const set = this.raphael.set();
+        const head = this.raphael.path(this.isMobile ? "M-4,4 C-4,4 -0.25,0 -0.25,0 C-0.25,0 -4,-4 -4,-4" : "M-3 4 C-2.75 2.5 0 0.25 0.75 0C0 -0.25 -2.75 -2.5 -3 -4");
         const end = path.getPointAtLength(l - 0.4);
         const almostTheEnd = path.getPointAtLength(l - 0.75 * s);
         const angle = Math.atan2(end.y - almostTheEnd.y, end.x - almostTheEnd.x) * 180 / Math.PI;
         const attrs = path.attr();
         delete attrs.path;
         let subpath = path.getSubpath(0, l - 0.75 * s);
-        subpath = thisGraphie.raphael.path(subpath).attr(attrs);
+        subpath = this.raphael.path(subpath).attr(attrs);
         subpath.arrowheadsDrawn = true;
         path.remove();
 
         // For some unknown reason 0 doesn't work for the rotation
         // origin so we use a tiny number.
-        head.rotate(angle, thisGraphie.isMobile ? 1e-5 : 0.75, 0).scale(s, s, 0.75, 0).translate(almostTheEnd.x, almostTheEnd.y).attr(attrs).attr({
+        head.rotate(angle, this.isMobile ? 1e-5 : 0.75, 0).scale(s, s, 0.75, 0).translate(almostTheEnd.x, almostTheEnd.y).attr(attrs).attr({
           "stroke-linejoin": "round",
           "stroke-linecap": "round"
         });
@@ -9312,429 +9477,195 @@ GraphUtils.createGraphie = function (el) {
       }
     } else if (type === raphael.exports.st) {
       for (let i = 0, l = path.items.length; i < l; i++) {
-        arrows(path.items[i]);
+        this.addArrowheads(path.items[i]);
       }
     }
     return path;
-  };
-  function circle(center, radius) {
-    return thisGraphie.raphael.ellipse(...thisGraphie.scalePoint(center).concat(thisGraphie.scaleVector([radius, radius])));
-  }
-
-  // (x, y) is coordinate of bottom left corner
-  function rect(x, y, width, height) {
-    // Raphael needs (x, y) to be coordinate of upper left corner
-    const corner = thisGraphie.scalePoint([x, y + height]);
-    const dims = thisGraphie.scaleVector([width, height]);
-    const elem = thisGraphie.raphael.rect(...corner.concat(dims));
-    if (thisGraphie.isMobile) {
-      elem.node.style.shapeRendering = "crispEdges";
-    }
-    return elem;
-  }
-  function ellipse(center, radii) {
-    return thisGraphie.raphael.ellipse(...thisGraphie.scalePoint(center).concat(thisGraphie.scaleVector(radii)));
   }
-  function fixedEllipse(center,
-  // Different type than Coord, this is radiusX, radiusY
-  radii, maxScale, padding) {
-    // Scale point and radius
-    const scaledPoint = thisGraphie.scalePoint(center);
-    const scaledRadii = thisGraphie.scaleVector(radii);
-    const width = 2 * scaledRadii[0] * maxScale + padding;
-    const height = 2 * scaledRadii[1] * maxScale + padding;
-
-    // Calculate absolute left, top
-    const left = scaledPoint[0] - width / 2;
-    const top = scaledPoint[1] - height / 2;
-
-    // Wrap in <div>
-    const wrapper = document.createElement("div");
-    $(wrapper).css({
-      position: "absolute",
-      width: width + "px",
-      height: height + "px",
-      left: left + "px",
-      top: top + "px"
-    });
-    // wrapper.setAttribute("data-graphie-type", "ellipse");
+  processAttributes(attrs) {
+    const transformers = {
+      scale: scale => {
+        this.drawingTransform().setScale(scale);
+      },
+      clipRect: pair => {
+        const point = pair[0];
+        const size = pair[1];
+        point[1] += size[1]; // because our coordinates are flipped
 
-    // Create Raphael canvas
-    const localRaphael = raphael.exports(wrapper, width, height);
-    const visibleShape = localRaphael.ellipse(width / 2, height / 2, scaledRadii[0], scaledRadii[1]);
-    return {
-      wrapper: wrapper,
-      visibleShape: visibleShape
+        return {
+          "clip-rect": this.scalePoint(point).concat(this.scaleVector(size)).join(" ")
+        };
+      },
+      strokeWidth: function (val) {
+        return {
+          "stroke-width": parseFloat(val)
+        };
+      },
+      rx: val => {
+        return {
+          rx: this.scaleVector([val, 0])[0]
+        };
+      },
+      ry: val => {
+        return {
+          ry: this.scaleVector([0, val])[1]
+        };
+      },
+      r: val => {
+        const scaled = this.scaleVector([val, val]);
+        return {
+          rx: scaled[0],
+          ry: scaled[1]
+        };
+      }
     };
-  }
-  function arc(center, radius, startAngle, endAngle, sector) {
-    startAngle = (startAngle % 360 + 360) % 360;
-    endAngle = (endAngle % 360 + 360) % 360;
-    const cent = thisGraphie.scalePoint(center);
-    const radii = thisGraphie.scaleVector(radius);
-    const startVector = polar(radius, startAngle);
-    const endVector = polar(radius, endAngle);
-    const startPoint = thisGraphie.scalePoint([center[0] + startVector[0], center[1] + startVector[1]]);
-    const endPoint = thisGraphie.scalePoint([center[0] + endVector[0], center[1] + endVector[1]]);
-    const largeAngle = ((endAngle - startAngle) % 360 + 360) % 360 > 180;
-    return thisGraphie.raphael.path("M" + startPoint.join(" ") + "A" + radii.join(" ") + " 0 " + (
-    // ellipse rotation
-    largeAngle ? 1 : 0) + " 0 " +
-    // sweep flag
-    endPoint.join(" ") + (sector ? "L" + cent.join(" ") + "z" : ""));
-  }
-  function path(points) {
-    // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-    const p = thisGraphie.raphael.path(thisGraphie.svgPath(points));
-    p.graphiePath = points;
-    return p;
-  }
-  function fixedPath(points, center, createPath) {
-    points = _.map(points, thisGraphie.scalePoint);
-    center = center ? thisGraphie.scalePoint(center) : null;
-    createPath = createPath || thisGraphie.svgPath;
-    const pathLeft = _.min(_.pluck(points, 0));
-    const pathRight = _.max(_.pluck(points, 0));
-    const pathTop = _.min(_.pluck(points, 1));
-    const pathBottom = _.max(_.pluck(points, 1));
-
-    // Apply padding to line
-    const padding = [4, 4];
-
-    // Calculate and apply additional offset
-    const extraOffset = [pathLeft, pathTop];
-
-    // Apply padding and offset to points
-    points = _.map(points, function (point) {
-      return vector$1.add(vector$1.subtract(point, extraOffset), vector$1.scale(padding, 0.5));
-    });
-
-    // Calculate <div> dimensions
-    const width = pathRight - pathLeft + padding[0];
-    const height = pathBottom - pathTop + padding[1];
-    const left = extraOffset[0] - padding[0] / 2;
-    const top = extraOffset[1] - padding[1] / 2;
-
-    // Create <div>
-    const wrapper = document.createElement("div");
-    $(wrapper).css({
-      position: "absolute",
-      width: width + "px",
-      height: height + "px",
-      left: left + "px",
-      top: top + "px",
-      // If user specified a center, set it
-      // NOTE(kevinb): jQuery doesn't like that `transformOrigin `could be `null`
-      // so we cast to `any` here.
-      transformOrigin: center ? width / 2 + center[0] + "px " + (height / 2 + center[1]) + "px" : null
+    const processed = {};
+    Object.entries(attrs || {}).forEach(function ([key, value]) {
+      const transformer = transformers[key];
+      if (typeof transformer === "function") {
+        Object.assign(processed, transformer(value));
+      } else {
+        const dasherized = String(key).replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2").replace(/([a-z\d])([A-Z])/g, "$1-$2").toLowerCase();
+        processed[dasherized] = value;
+      }
     });
-
-    // Create Raphael canvas
-    const localRaphael = raphael.exports(wrapper, width, height);
-
-    // Calculate path
-    const visibleShape = localRaphael.path(createPath(points));
-    return {
-      wrapper: wrapper,
-      visibleShape: visibleShape
-    };
+    return processed;
   }
-  function scaledPath(points) {
-    const p = thisGraphie.raphael.path(thisGraphie.svgPath(points, /* alreadyScaled */true));
-    p.graphiePath = points;
-    return p;
+}
+const labelDirections = {
+  center: [-0.5, -0.5],
+  above: [-0.5, -1.0],
+  "above right": [0.0, -1.0],
+  right: [0.0, -0.5],
+  "below right": [0.0, 0.0],
+  below: [-0.5, 0.0],
+  "below left": [-1.0, 0.0],
+  left: [-1.0, -0.5],
+  "above left": [-1.0, -1.0]
+};
+
+// A range for a Graphie can be specified in one of three forms:
+// - A pair of intervals, [[xMin, xMax], [yMin, yMax]]. This is the
+//   "normalized" form.
+// - A pair of magnitudes for the x and y ranges, respectively. E.g. [5, 10]
+//   is equivalent to [[-5, 5], [-10, 10]].
+// - A single magnitude to be used for both x and y. E.g. 10 is equivalent to
+//   [[-10, 10], [-10, 10]]
+// Overload normalizeRange to specify that it only returns undefined if its
+// argument is undefined.
+// normalizeRange converts a RangeSpecifier into a pair of Intervals that give
+// the x and y ranges, respectively
+function normalizeRange(range) {
+  function normalizeInterval(magnitude) {
+    if (typeof magnitude === "number") {
+      return [-magnitude, magnitude];
+    } else {
+      return magnitude;
+    }
   }
-  function line(start, end) {
-    const l = path([start, end]);
-    if (thisGraphie.isMobile) {
-      l.node.style.shapeRendering = "crispEdges";
+  function getXAndYRanges(range) {
+    if (Array.isArray(range)) {
+      return range;
+    } else {
+      return [range, range];
     }
-    return l;
   }
-  function parabola(a, b, c) {
-    // Plot a parabola of the form: f(x) = (a * x + b) * x + c
-    return thisGraphie.raphael.path(thisGraphie.svgParabolaPath(a, b, c));
+  if (range == null) {
+    return range;
   }
-  function fixedLine(start, end, thickness) {
-    // Apply padding to line
-    const padding = [thickness, thickness];
-
-    // Scale points to get values in pixels
-    start = thisGraphie.scalePoint(start);
-    end = thisGraphie.scalePoint(end);
-
-    // Calculate and apply additional offset
-    const extraOffset = [Math.min(start[0], end[0]), Math.min(start[1], end[1])];
-
-    // Apply padding and offset to start, end points
-    start = vector$1.add(vector$1.subtract(start, extraOffset), vector$1.scale(padding, 0.5));
-    end = vector$1.add(vector$1.subtract(end, extraOffset), vector$1.scale(padding, 0.5));
-
-    // Calculate <div> dimensions
-    const left = extraOffset[0] - padding[0] / 2;
-    const top = extraOffset[1] - padding[1] / 2;
-    const width = Math.abs(start[0] - end[0]) + padding[0];
-    const height = Math.abs(start[1] - end[1]) + padding[1];
+  const [xRange, yRange] = getXAndYRanges(range);
+  return [normalizeInterval(xRange), normalizeInterval(yRange)];
+}
+function toPair(x) {
+  if (Array.isArray(x)) {
+    return x;
+  }
+  return [x, x];
+}
 
-    // Create <div>
-    const wrapper = document.createElement("div");
-    $(wrapper).css({
-      position: "absolute",
-      width: width + "px",
-      height: height + "px",
-      left: left + "px",
-      top: top + "px",
-      // Outsiders should feel like the line's 'origin' (i.e., for
-      // rotation) is the starting point
-      transformOrigin: start[0] + "px " + start[1] + "px"
+/**
+ * Safari applies some SVG-specific styles to things that are not SVGs, so we
+ * need to exclude those styles from things that are not SVGs.
+ *
+ * To see this behavior in action, open https://codepen.io/anon/pen/zENEoa in
+ * Safari.
+ *
+ * Usage `{...someStyles, ...SVG_SPECIFIC_STYLE_MASK}`
+ */
+const SVG_SPECIFIC_STYLE_MASK = {
+  "stroke-width": null
+};
+const setLabelMargins = function setLabelMargins(span, size) {
+  const $span = $(span);
+  const direction = $span.data("labelDirection");
+  let [width, height] = size;
+  // This can happen when a span
+  // is invisible but we still want to update the CSS. At worst, we will
+  // be off by a few pixels instead of in a different position entirely.
+  if (width === 0 && height === 0) {
+    [width, height] = [1, 1];
+    Log.log("Label size was 0x0 in graphie.js; using 1x1 instead");
+  }
+  $span.css("visibility", "");
+  if (typeof direction === "number") {
+    const x = Math.cos(direction);
+    const y = Math.sin(direction);
+    const scale = Math.min(width / 2 / Math.abs(x), height / 2 / Math.abs(y));
+    $span.css({
+      marginLeft: -width / 2 + x * scale,
+      marginTop: -height / 2 - y * scale
+    });
+  } else {
+    const multipliers = labelDirections[direction || "center"];
+    $span.css({
+      marginLeft: Math.round(width * multipliers[0]),
+      marginTop: Math.round(height * multipliers[1])
     });
-
-    // Create Raphael canvas
-    const localRaphael = raphael.exports(wrapper, width, height);
-
-    // Calculate path
-    const path = "M" + start[0] + " " + start[1] + " " + "L" + end[0] + " " + end[1];
-    const visibleShape = localRaphael.path(path);
-    visibleShape.graphiePath = [start, end];
-    return {
-      wrapper: wrapper,
-      visibleShape: visibleShape
-    };
   }
-  function sinusoid(a, b, c, d) {
-    // Plot a sinusoid of the form: f(x) = a * sin(b * x - c) + d
-    return thisGraphie.raphael.path(thisGraphie.svgSinusoidPath(a, b, c, d));
-  }
-  function grid(xr, yr) {
-    const step = thisGraphie.currentStyle.step || [1, 1];
-    const set = thisGraphie.raphael.set();
-    let x = step[0] * Math.ceil(xr[0] / step[0]);
-    for (; x <= xr[1]; x += step[0]) {
-      set.push(line([x, yr[0]], [x, yr[1]]));
-    }
-    let y = step[1] * Math.ceil(yr[0] / step[1]);
-    for (; y <= yr[1]; y += step[1]) {
-      set.push(line([xr[0], y], [xr[1], y]));
-    }
-    return set;
-  }
-  function label(point, text, direction, latex) {
-    latex = typeof latex === "undefined" || latex;
-    const $span = $("<span>").addClass("graphie-label");
-    const pad = thisGraphie.currentStyle["label-distance"];
-    $span.css($.extend({}, {
-      position: "absolute",
-      padding: (pad != null ? pad : 7) + "px",
-      color: "black"
-    })).data("labelDirection", direction).appendTo(thisGraphie.el);
-
-    // @ts-expect-error - TS2339 - Property 'setPosition' does not exist on type 'JQuery<HTMLElement>'.
-    $span.setPosition = function (point) {
-      const scaledPoint = thisGraphie.scalePoint(point);
-      $span.css({
-        left: scaledPoint[0],
-        top: scaledPoint[1]
-      });
-    };
-
-    // @ts-expect-error - TS2339 - Property 'setPosition' does not exist on type 'JQuery<HTMLElement>'.
-    $span.setPosition(point);
-    const span = $span[0];
-
-    // @ts-expect-error - TS2339 - Property 'processMath' does not exist on type 'JQuery<HTMLElement>'.
-    $span.processMath = function (math, force) {
-      processMath$1(span, math, force, function () {
-        const width = span.scrollWidth;
-        const height = span.scrollHeight;
-        setLabelMargins(span, [width, height]);
-      });
-    };
-
-    // @ts-expect-error - TS2339 - Property 'processText' does not exist on type 'JQuery<HTMLElement>'.
-    $span.processText = function (text) {
-      $span.html(text);
-      const width = span.scrollWidth;
-      const height = span.scrollHeight;
-      setLabelMargins(span, [width, height]);
-    };
-    if (latex) {
-      // @ts-expect-error - TS2339 - Property 'processMath' does not exist on type 'JQuery<HTMLElement>'.
-      $span.processMath(text, /* force */false);
-    } else {
-      // @ts-expect-error - TS2339 - Property 'processText' does not exist on type 'JQuery<HTMLElement>'.
-      $span.processText(text);
-    }
-    return $span;
-  }
-  function plotParametric(fn, range, shade, fn2 = t => [t, 0]) {
-    // Note: fn2 should only be set if 'shade' is true, as it denotes
-    // the function between which fn should have its area shaded.
-    // In general, plotParametric shouldn't be used to shade the area
-    // between two arbitrary parametrics functions over an interval,
-    // as the method assumes that fn and fn2 are both of the form
-    // fn(t) = (t, fn'(t)) for some initial fn'.
-
-    // We truncate to 500,000, since anything bigger causes
-    // overflow in the firefox svg renderer.  This is safe
-    // since 500,000 is outside the viewport anyway.  We
-    // write these functions the way we do to handle undefined.
-    const clipper = xy => {
-      if (Math.abs(xy[1]) > 500000) {
-        return [xy[0], Math.min(Math.max(xy[1], -500000), 500000)];
-      }
-      return xy;
-    };
-    const clippedFn = x => clipper(fn(x));
-    const clippedFn2 = x => clipper(fn2(x));
-    if (!thisGraphie.currentStyle.strokeLinejoin) {
-      thisGraphie.currentStyle.strokeLinejoin = "round";
-    }
-    if (!thisGraphie.currentStyle.strokeLinecap) {
-      thisGraphie.currentStyle.strokeLinecap = "round";
-    }
-    const min = range[0];
-    const max = range[1];
-    let step = (max - min) / (thisGraphie.currentStyle["plot-points"] || 800);
-    if (step === 0) {
-      step = 1;
-    }
-    const paths = thisGraphie.raphael.set();
-    let points = [];
-    let lastDiff = GraphUtils.coordDiff(clippedFn(min), clippedFn2(min));
-    let lastFlip = min;
-    for (let t = min; t <= max; t += step) {
-      const top = clippedFn(t);
-      const bottom = clippedFn2(t);
-      const diff = GraphUtils.coordDiff(top, bottom);
-
-      // Find points where it flips
-      // Create path that sketches area between the two functions
-      if (
-      // if there is an asymptote here, meaning that the graph
-      // switches signs and has a large difference
-      diff[1] < 0 !== lastDiff[1] < 0 && Math.abs(diff[1] - lastDiff[1]) > 2 * thisGraphie.drawingTransform().pixelsPerUnitY() ||
-      // or the function is undefined
-      isNaN(diff[1])) {
-        // split the path at this point, and draw it
-        if (shade) {
-          // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
-          points.push(top);
-
-          // backtrack to draw paired function
-          for (let u = t - step; u >= lastFlip; u -= step) {
-            // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
-            points.push(clippedFn2(u));
-          }
-          lastFlip = t;
-        }
-        paths.push(path(points));
-        // restart the path, excluding this point
-        points = [];
-        if (shade) {
-          // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
-          points.push(top);
-        }
-      } else {
-        // otherwise, just add the point to the path
-        // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
-        points.push(top);
-      }
-      lastDiff = diff;
+};
+const GraphUtils = {
+  Graphie: Graphie$1,
+  createGraphie: function (el) {
+    return new Graphie$1(el);
+  },
+  unscaledSvgPath: function (points) {
+    // If this is an empty closed path, return "" instead of "z", which
+    // would give an error
+    if (points[0] === true) {
+      return "";
     }
-    if (shade) {
-      // backtrack to draw paired function
-      for (let u = max - step; u >= lastFlip; u -= step) {
-        // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
-        points.push(clippedFn2(u));
+    return points.map(function (point, i) {
+      if (point === true) {
+        return "z";
       }
-    }
-    paths.push(path(points));
-    return paths;
-  }
-  function plot(fn, range, swapAxes, shade, fn2) {
-    const min = range[0];
-    const max = range[1];
-    if (!thisGraphie.currentStyle["plot-points"]) {
-      thisGraphie.currentStyle["plot-points"] = 2 * (max - min) * thisGraphie.drawingTransform().pixelsPerUnitX();
-    }
-    if (swapAxes) {
-      if (fn2) {
-        // TODO(charlie): support swapped axis area shading
-        throw new PerseusError("Can't shade area between functions with swapped axes.", Errors.Internal);
+      return (i === 0 ? "M" : "L") + point[0] + " " + point[1];
+    }).join("");
+  },
+  getDistance: function (point1, point2) {
+    return point.distanceToPoint(point1, point2);
+  },
+  /**
+   * Round the given coordinates to a given snap value
+   * (e.g., nearest 0.2 increment)
+   */
+  snapCoord: function (coord, snap) {
+    return coord.map(function (val, i) {
+      return KhanMath.roundToNearest(snap[i], val);
+    });
+  },
+  // Find the angle in degrees between two or three points
+  findAngle: function (point1, point2, vertex) {
+    if (vertex === undefined) {
+      const x = point1[0] - point2[0];
+      const y = point1[1] - point2[1];
+      if (!x && !y) {
+        return 0;
       }
-      return plotParametric(function (y) {
-        return [fn(y), y];
-      }, range, shade);
+      return (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
     }
-    if (fn2) {
-      if (shade) {
-        return plotParametric(function (x) {
-          return [x, fn(x)];
-        }, range, shade, function (x) {
-          return [x, fn2(x)];
-        });
-      }
-      throw new PerseusError("fn2 should only be set when 'shade' is True.", Errors.Internal);
-    }
-    return plotParametric(function (x) {
-      return [x, fn(x)];
-    }, range, shade);
-  }
-  const drawingTools = {
-    circle,
-    rect,
-    ellipse,
-    fixedEllipse,
-    arc,
-    path,
-    fixedPath,
-    scaledPath,
-    line,
-    parabola,
-    fixedLine,
-    sinusoid,
-    grid,
-    label,
-    plotParametric,
-    plot
-  };
-  function graphify(drawingFn) {
-    return function (...args) {
-      const last = args[args.length - 1];
-      const oldStyle = thisGraphie.currentStyle;
-      let result;
-
-      // The last argument is probably trying to change the style
-      if (typeof last === "object" && !_.isArray(last)) {
-        thisGraphie.currentStyle = _extends({}, thisGraphie.currentStyle, thisGraphie.processAttributes(last));
-        const rest = [].slice.call(args, 0, args.length - 1);
-        result = drawingFn(...rest);
-      } else {
-        thisGraphie.currentStyle = $.extend({}, thisGraphie.currentStyle);
-        result = drawingFn(...args);
-      }
-
-      // Bad heuristic for recognizing Raphael elements and sets
-      const type = result.constructor.prototype;
-      if (type === raphael.exports.el || type === raphael.exports.st) {
-        result.attr(thisGraphie.currentStyle);
-        if (thisGraphie.currentStyle.arrows) {
-          result = addArrowheads(result);
-        }
-      } else if (result instanceof $) {
-        // We assume that if it's not a Raphael element/set, it
-        // does not contain SVG.
-        // @ts-expect-error - TS2339 - Property 'css' does not exist on type '{}'.
-        result.css(_extends({}, thisGraphie.currentStyle, SVG_SPECIFIC_STYLE_MASK));
-      }
-      thisGraphie.currentStyle = oldStyle;
-      return result;
-    };
-  }
-  $.each(drawingTools, function (name) {
-    thisGraphie[name] = graphify(drawingTools[name]);
-  });
-  return thisGraphie;
+    return GraphUtils.findAngle(point1, vertex) - GraphUtils.findAngle(point2, vertex);
+  },
+  graphs: {}
 };
 
 /* eslint-disable */
@@ -10452,15 +10383,65 @@ const WrappedPath = function WrappedPath(graphie, points, options) {
 };
 _.extend(WrappedPath.prototype, WrappedDefaults);
 
-/* eslint-disable @babel/no-invalid-this */
+/**
+ * A collection of geomtry-related utility functions
+ */
 const {
-  getCanUse3dTransform
-} = InteractiveUtil;
-function sum$1(array) {
-  return _.reduce(array, function (memo, arg) {
-    return memo + arg;
-  }, 0);
+  eq: eq$1,
+  deepEq: deepEq$4
+} = Util;
+
+// This should really be a readonly tuple of [number, number]
+
+// a, b, c
+
+function sign(val) {
+  if (eq$1(val, 0)) {
+    return 0;
+  }
+  return val > 0 ? 1 : -1;
+}
+function ccw(a, b, c) {
+  return (b[0] - a[0]) * (c[1] - a[1]) - (c[0] - a[0]) * (b[1] - a[1]);
+}
+function collinear(a, b, c) {
+  return eq$1(ccw(a, b, c), 0);
 }
+
+// Given rect bounding points A and B, whether point C is inside the rect
+function pointInRect(a, b, c) {
+  return c[0] <= Math.max(a[0], b[0]) && c[0] >= Math.min(a[0], b[0]) && c[1] <= Math.max(a[1], b[1]) && c[1] >= Math.min(a[1], b[1]);
+}
+
+// Whether line segment AB intersects line segment CD
+// http://www.geeksforgeeks.org/check-if-two-given-line-segments-intersect/
+function intersects(ab, cd) {
+  const triplets = [[ab[0], ab[1], cd[0]], [ab[0], ab[1], cd[1]], [cd[0], cd[1], ab[0]], [cd[0], cd[1], ab[1]]];
+  const orientations = _.map(triplets, function (triplet) {
+    return sign(ccw(...triplet));
+  });
+  if (orientations[0] !== orientations[1] && orientations[2] !== orientations[3]) {
+    return true;
+  }
+  for (let i = 0; i < 4; i++) {
+    if (orientations[i] === 0 && pointInRect(...triplets[i])) {
+      return true;
+    }
+  }
+  return false;
+}
+function vector(a, b) {
+  return _.map(_.zip(a, b), function (pair) {
+    return pair[0] - pair[1];
+  });
+}
+function reverseVector(vector) {
+  return [-vector[0], -vector[1]];
+}
+
+// Returns whether connecting the given sequence of `points` forms a clockwise
+// path (assuming a closed loop, where the last point connects back to the
+// first).
 function clockwise$1(points) {
   const segments = _.zip(points, points.slice(1).concat(points.slice(0, 1)));
   const areas = _.map(segments, function (segment) {
@@ -10470,17 +10451,164 @@ function clockwise$1(points) {
   });
   return sum$1(areas) > 0;
 }
-
-/* vector-add multiple [x, y] coords/vectors */
-function addPoints(...points) {
-  const zipped = _.zip(...points);
-  return _.map(zipped, sum$1);
+function magnitude(v) {
+  return Math.sqrt(_.reduce(v, function (memo, el) {
+    // @ts-expect-error - TS2345 - Argument of type 'Coord' is not assignable to parameter of type 'number'.
+    return memo + Math.pow(el, 2);
+  }, 0));
 }
-function reverseVector(vector) {
-  return _.map(vector, function (coord) {
-    return coord * -1;
+function dotProduct(a, b) {
+  return _.reduce(_.zip(a, b), function (memo, pair) {
+    return memo + pair[0] * pair[1];
+  }, 0);
+}
+function sideLengths(coords) {
+  const segments = _.zip(coords, rotate(coords));
+  return segments.map(function (segment) {
+    // @ts-expect-error - TS2345 - Argument of type 'number[]' is not assignable to parameter of type 'readonly Coord[]'. | TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
+    return magnitude(vector(...segment));
   });
 }
+
+// Based on http://math.stackexchange.com/a/151149
+function angleMeasures(coords) {
+  const triplets = _.zip(rotate(coords, -1), coords, rotate(coords, 1));
+  const offsets = _.map(triplets, function (triplet) {
+    const p = vector(triplet[1], triplet[0]);
+    const q = vector(triplet[2], triplet[1]);
+    // @ts-expect-error - TS2345 - Argument of type 'number[]' is not assignable to parameter of type 'Coord'. | TS2345 - Argument of type 'number[]' is not assignable to parameter of type 'readonly Coord[]'. | TS2345 - Argument of type 'number[]' is not assignable to parameter of type 'readonly Coord[]'.
+    const raw = Math.acos(dotProduct(p, q) / (magnitude(p) * magnitude(q)));
+    // @ts-expect-error - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
+    return sign(ccw(...triplet)) > 0 ? raw : -raw;
+  });
+  const sum = _.reduce(offsets, function (memo, arg) {
+    return memo + arg;
+  }, 0);
+  return _.map(offsets, function (offset) {
+    return sum > 0 ? Math.PI - offset : Math.PI + offset;
+  });
+}
+
+// Whether two polygons are similar (or if specified, congruent)
+function similar(coords1, coords2, tolerance) {
+  if (coords1.length !== coords2.length) {
+    return false;
+  }
+  const n = coords1.length;
+  const angles1 = angleMeasures(coords1);
+  const angles2 = angleMeasures(coords2);
+  const sides1 = sideLengths(coords1);
+  const sides2 = sideLengths(coords2);
+  for (let i = 0; i < 2 * n; i++) {
+    let angles = angles2.slice();
+    let sides = sides2.slice();
+
+    // Reverse angles and sides to allow matching reflected polygons
+    if (i >= n) {
+      angles.reverse();
+      sides.reverse();
+      // Since sides are calculated from two coordinates,
+      // simply reversing results in an off by one error
+      // @ts-expect-error - TS4104 - The type 'readonly number[]' is 'readonly' and cannot be assigned to the mutable type 'number[]'.
+      sides = rotate(sides, 1);
+    }
+
+    // @ts-expect-error - TS4104 - The type 'readonly number[]' is 'readonly' and cannot be assigned to the mutable type 'number[]'.
+    angles = rotate(angles, i);
+    // @ts-expect-error - TS4104 - The type 'readonly number[]' is 'readonly' and cannot be assigned to the mutable type 'number[]'.
+    sides = rotate(sides, i);
+    if (deepEq$4(angles1, angles)) {
+      const sidePairs = _.zip(sides1, sides);
+      const factors = _.map(sidePairs, function (pair) {
+        return pair[0] / pair[1];
+      });
+      const same = _.all(factors, function (factor) {
+        return eq$1(factors[0], factor);
+      });
+      const congruentEnough = _.all(sidePairs, function (pair) {
+        return number.equal(pair[0], pair[1], tolerance);
+      });
+      if (same && congruentEnough) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+// Given triangle with sides ABC return angle opposite side C in degrees
+function lawOfCosines(a, b, c) {
+  return Math.acos((a * a + b * b - c * c) / (2 * a * b)) * 180 / Math.PI;
+}
+function canonicalSineCoefficients$1([amplitude, angularFrequency, phase, verticalOffset]) {
+  // For a curve of the form f(x) = a * Sin(b * x - c) + d,
+  // this function ensures that a, b > 0, and c is its
+  // smallest possible positive value.
+
+  // Guarantee a > 0
+  if (amplitude < 0) {
+    amplitude *= -1;
+    angularFrequency *= -1;
+    phase *= -1;
+  }
+  const period = 2 * Math.PI;
+  // Guarantee b > 0
+  if (angularFrequency < 0) {
+    angularFrequency *= -1;
+    phase *= -1;
+    phase += period / 2;
+  }
+
+  // Guarantee c is smallest possible positive value
+  while (phase > 0) {
+    phase -= period;
+  }
+  while (phase < 0) {
+    phase += period;
+  }
+  return [amplitude, angularFrequency, phase, verticalOffset];
+}
+
+// e.g. rotate([1, 2, 3]) -> [2, 3, 1]
+function rotate(array, n) {
+  n = typeof n === "undefined" ? 1 : n % array.length;
+  return array.slice(n).concat(array.slice(0, n));
+}
+function getLineEquation(first, second) {
+  if (eq$1(first[0], second[0])) {
+    return "x = " + first[0].toFixed(3);
+  }
+  const m = (second[1] - first[1]) / (second[0] - first[0]);
+  const b = first[1] - m * first[0];
+  return "y = " + m.toFixed(3) + "x + " + b.toFixed(3);
+}
+
+// Stolen from the wikipedia article
+// http://en.wikipedia.org/wiki/Line-line_intersection
+function getLineIntersection(
+// TODO(LP-10725): update these to be 2-tuples
+firstPoints, secondPoints) {
+  const x1 = firstPoints[0][0];
+  const y1 = firstPoints[0][1];
+  const x2 = firstPoints[1][0];
+  const y2 = firstPoints[1][1];
+  const x3 = secondPoints[0][0];
+  const y3 = secondPoints[0][1];
+  const x4 = secondPoints[1][0];
+  const y4 = secondPoints[1][1];
+  const determinant = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
+  if (Math.abs(determinant) < 1e-9) {
+    return "Lines are parallel";
+  }
+  const x = ((x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4)) / determinant;
+  const y = ((x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4)) / determinant;
+  return "Intersection: (" + x.toFixed(3) + ", " + y.toFixed(3) + ")";
+}
+
+/* eslint-disable @babel/no-invalid-this */
+const {
+  getCanUse3dTransform
+} = InteractiveUtil;
 function scaledDistanceFromAngle(angle) {
   const a = 3.51470560176242 * 20;
   const b = 0.5687298702748785 * 20;
@@ -10657,10 +10785,10 @@ _.extend(GraphUtils.Graphie.prototype, {
     let sRadius = sPadding + scaledDistanceFromAngle(angle);
     const temp = [];
     if (Math.abs(angle - 90) < 1e-9 && options.showRightAngleMarker) {
-      const v1 = addPoints(sVertex, scaledPolarDeg(sRadius, startAngle));
-      const v2 = addPoints(sVertex, scaledPolarDeg(sRadius, endAngle));
+      const v1 = vector$1.add(sVertex, scaledPolarDeg(sRadius, startAngle));
+      const v2 = vector$1.add(sVertex, scaledPolarDeg(sRadius, endAngle));
       sRadius *= Math.SQRT2;
-      const v3 = addPoints(sVertex, scaledPolarDeg(sRadius, halfAngle));
+      const v3 = vector$1.add(sVertex, scaledPolarDeg(sRadius, halfAngle));
       _.each([v1, v2], function (v) {
         // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
         temp.push(graphie.scaledPath([v, v3], options.style));
@@ -10681,7 +10809,7 @@ _.extend(GraphUtils.Graphie.prototype, {
         text = text.replace(match[0], KhanMath.toFixedApprox(angle, precision) + "^{\\circ}");
       }
       const sOffset = scaledPolarDeg(sRadius + 15, halfAngle);
-      const sPosition = addPoints(sVertex, sOffset);
+      const sPosition = vector$1.add(sVertex, sOffset);
       const position = graphie.unscalePoint(sPosition);
 
       // Reuse label if possible
@@ -10732,7 +10860,7 @@ _.extend(GraphUtils.Graphie.prototype, {
         const sOffset = sSpacing * (i - (n - 1) / 2);
         const sOffsetVector = scaledPolarRad(sOffset, parallelAngle);
         const sHeightVector = scaledPolarRad(sHeight, perpendicularAngle);
-        const sPath = [addPoints(sMidpoint, sOffsetVector, sHeightVector), addPoints(sMidpoint, sOffsetVector, reverseVector(sHeightVector))];
+        const sPath = [vector$1.add(sMidpoint, sOffsetVector, sHeightVector), vector$1.add(sMidpoint, sOffsetVector, reverseVector(sHeightVector))];
 
         // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
         temp.push(graphie.scaledPath(sPath, style));
@@ -10759,7 +10887,7 @@ _.extend(GraphUtils.Graphie.prototype, {
         if (start !== p1) {
           sOffsetVector = reverseVector(sOffsetVector);
         }
-        const sEnd = addPoints(sMidpoint, sOffsetVector);
+        const sEnd = vector$1.add(sMidpoint, sOffsetVector);
 
         // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
         temp.push(graphie.scaledPath([sStart, sEnd], style));
@@ -10775,7 +10903,7 @@ _.extend(GraphUtils.Graphie.prototype, {
       }
       const sOffset = 20;
       const sOffsetVector = scaledPolarRad(sOffset, perpendicularAngle);
-      const sPosition = addPoints(sMidpoint, sOffsetVector);
+      const sPosition = vector$1.add(sMidpoint, sOffsetVector);
       const position = graphie.unscalePoint(sPosition);
 
       // Reuse label if possible
@@ -10833,7 +10961,7 @@ _.extend(GraphUtils.Graphie.prototype, {
     }
     const sRadius = 10 + scaledDistanceFromAngle(360 - angle);
     const sOffsetVector = scaledPolarDeg(sRadius, halfAngle);
-    const sPosition = addPoints(sVertex, sOffsetVector);
+    const sPosition = vector$1.add(sVertex, sOffsetVector);
     const position = graphie.unscalePoint(sPosition);
 
     // Reuse label if possible
@@ -12684,7 +12812,7 @@ _.extend(GraphUtils.Graphie.prototype, {
     // @ts-expect-error - TS2350 - Only a void function can be called with the 'new' keyword.
     return new Ruler(this, options || {});
   },
-  addPoints: addPoints
+  addPoints: vector$1.add
 });
 function Protractor(graph, center) {
   // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
@@ -13038,7 +13166,7 @@ function Ruler(graphie, options) {
       set.push(label);
     }
   });
-  const mouseTarget = graphie.mouselayer.path(GraphUtils.svgPath([leftBottom, [left, top], rightTop, [right, bottom], /* closed */true]));
+  const mouseTarget = graphie.mouselayer.path(graphie.svgPath([leftBottom, [left, top], rightTop, [right, bottom], /* closed */true]));
   mouseTarget.attr({
     fill: "#000",
     opacity: 0,
@@ -13282,12 +13410,12 @@ _.extend(MovableAngle.prototype, {
     points[1].onMove = function (x, y) {
       const oldVertex = points[1].coord;
       const newVertex = [x, y];
-      const delta = addPoints(newVertex, reverseVector(oldVertex));
+      const delta = vector$1.add(newVertex, reverseVector(oldVertex));
       let valid = true;
       const newPoints = {};
       _.each([0, 2], function (i) {
         const oldPoint = points[i].coord;
-        let newPoint = addPoints(oldPoint, delta);
+        let newPoint = vector$1.add(oldPoint, delta);
         let angle = GraphUtils.findAngle(newVertex, newPoint);
         angle *= Math.PI / 180;
         newPoint = graphie.constrainToBoundsOnAngle(newPoint, 10, angle);
@@ -13324,7 +13452,7 @@ _.extend(MovableAngle.prototype, {
           let angle = GraphUtils.findAngle(newPoint, vertex);
           angle = Math.round((angle - snapOffset) / snap) * snap + snapOffset;
           const distance = GraphUtils.getDistance(newPoint, vertex);
-          return addPoints(vertex, polar(distance, angle));
+          return vector$1.add(vertex, polar(distance, angle));
         }
         return true;
       };
@@ -13475,7 +13603,7 @@ _.extend(MovableAngle.prototype, {
 
 /* eslint-disable @babel/no-invalid-this */
 const nestedMap$1 = Util.nestedMap;
-const deepEq$4 = Util.deepEq;
+const deepEq$3 = Util.deepEq;
 
 /**
  * A base class for all Graphie Movables
@@ -13572,7 +13700,7 @@ const createSimpleClass = function createSimpleClass(addFunction) {
       this._prevProps = this.props;
     },
     modify: function (graphie) {
-      if (!deepEq$4(this.props, this._prevProps)) {
+      if (!deepEq$3(this.props, this._prevProps)) {
         this.remove();
         this.add(graphie);
         this._prevProps = this.props;
@@ -16029,7 +16157,7 @@ var Movables = {
 const GraphieMovable = GraphieClasses.GraphieMovable;
 const createGraphie = GraphUtils.createGraphie;
 const {
-  deepEq: deepEq$3,
+  deepEq: deepEq$2,
   nestedMap
 } = Util;
 const {
@@ -16275,7 +16403,7 @@ class Graphie extends React.Component {
     if (this.props.setup !== prevProps.setup) {
       Log.error("<Graphie> was given a new setup function. " + "This is a bad idea; please refactor your code to give " + "the same setup function reference to <Graphie> on " + "every render.", Errors.Internal);
     }
-    if (!deepEq$3(this.props.options, prevProps.options) || !deepEq$3(this.props.box, prevProps.box) || !deepEq$3(this.props.range, prevProps.range)) {
+    if (!deepEq$2(this.props.options, prevProps.options) || !deepEq$2(this.props.box, prevProps.box) || !deepEq$2(this.props.range, prevProps.range)) {
       this._setupGraphie();
     }
     this._updateMovables();
@@ -18965,10 +19093,18 @@ class Renderer extends React.Component {
       });
     };
     this._getAllWidgetsStartProps = (allWidgetInfo, props) => {
-      // @ts-expect-error - TS2345 - Argument of type '{ [key: string]: PerseusWidget; }' is not assignable to parameter of type 'Partial<Record<string, CategorizerWidget>>'.
-      return mapObject$1(allWidgetInfo, widgetInfo => {
-        return getRendererPropsForWidgetInfo(widgetInfo, props.problemNum);
+      const {
+        apiOptions,
+        problemNum
+      } = props;
+      const widgetsStartProps = {};
+      entries(allWidgetInfo).forEach(([key, widgetInfo]) => {
+        widgetsStartProps[key] = getRendererPropsForWidgetInfo(widgetInfo, problemNum);
       });
+
+      // Call the onWidgetStartProps callback if it exists
+      apiOptions == null || apiOptions.onWidgetStartProps == null || apiOptions.onWidgetStartProps(widgetsStartProps);
+      return widgetsStartProps;
     };
     // This is only used in _getWidgetInfo as a fallback if widgetId
     // doesn't exist in this.state.widgetInfo.  It doesn't get run as
@@ -25443,7 +25579,7 @@ const DEFAULT_BACKGROUND_IMAGE = {
 
 // TODO(charlie): These really need to go into a utility file as they're being
 // used by both interactive-graph and now grapher.
-function canonicalSineCoefficients$1(coeffs) {
+function canonicalSineCoefficients(coeffs) {
   // For a curve of the form f(x) = a * Sin(b * x - c) + d,
   // this function ensures that a, b > 0, and c is its
   // smallest possible positive value.
@@ -25624,7 +25760,7 @@ const Sinusoid = _.extend({}, PlotDefaults, {
     return "y = " + a.toFixed(3) + " sin(" + b.toFixed(3) + "x - " + c.toFixed(3) + ") + " + d.toFixed(3);
   },
   areEqual: function (coeffs1, coeffs2) {
-    return Util.deepEq(canonicalSineCoefficients$1(coeffs1), canonicalSineCoefficients$1(coeffs2));
+    return Util.deepEq(canonicalSineCoefficients(coeffs1), canonicalSineCoefficients(coeffs2));
   }
 });
 const Tangent = _.extend({}, PlotDefaults, {
@@ -27842,212 +27978,6 @@ Graph.defaultProps = {
   isMobile: false
 };
 
-/**
- * A collection of geomtry-related utility functions
- */
-const {
-  eq: eq$1,
-  deepEq: deepEq$2
-} = Util;
-
-// This should really be a readonly tuple of [number, number]
-
-// a, b, c
-
-function sign(val) {
-  if (eq$1(val, 0)) {
-    return 0;
-  }
-  return val > 0 ? 1 : -1;
-}
-function ccw(a, b, c) {
-  return (b[0] - a[0]) * (c[1] - a[1]) - (c[0] - a[0]) * (b[1] - a[1]);
-}
-function collinear(a, b, c) {
-  return eq$1(ccw(a, b, c), 0);
-}
-
-// Given rect bounding points A and B, whether point C is inside the rect
-function pointInRect(a, b, c) {
-  return c[0] <= Math.max(a[0], b[0]) && c[0] >= Math.min(a[0], b[0]) && c[1] <= Math.max(a[1], b[1]) && c[1] >= Math.min(a[1], b[1]);
-}
-
-// Whether line segment AB intersects line segment CD
-// http://www.geeksforgeeks.org/check-if-two-given-line-segments-intersect/
-function intersects(ab, cd) {
-  const triplets = [[ab[0], ab[1], cd[0]], [ab[0], ab[1], cd[1]], [cd[0], cd[1], ab[0]], [cd[0], cd[1], ab[1]]];
-  const orientations = _.map(triplets, function (triplet) {
-    return sign(ccw(...triplet));
-  });
-  if (orientations[0] !== orientations[1] && orientations[2] !== orientations[3]) {
-    return true;
-  }
-  for (let i = 0; i < 4; i++) {
-    if (orientations[i] === 0 && pointInRect(...triplets[i])) {
-      return true;
-    }
-  }
-  return false;
-}
-function vector(a, b) {
-  return _.map(_.zip(a, b), function (pair) {
-    return pair[0] - pair[1];
-  });
-}
-function magnitude(v) {
-  return Math.sqrt(_.reduce(v, function (memo, el) {
-    // @ts-expect-error - TS2345 - Argument of type 'Coord' is not assignable to parameter of type 'number'.
-    return memo + Math.pow(el, 2);
-  }, 0));
-}
-function dotProduct(a, b) {
-  return _.reduce(_.zip(a, b), function (memo, pair) {
-    return memo + pair[0] * pair[1];
-  }, 0);
-}
-function sideLengths(coords) {
-  const segments = _.zip(coords, rotate(coords));
-  return segments.map(function (segment) {
-    // @ts-expect-error - TS2345 - Argument of type 'number[]' is not assignable to parameter of type 'readonly Coord[]'. | TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    return magnitude(vector(...segment));
-  });
-}
-
-// Based on http://math.stackexchange.com/a/151149
-function angleMeasures(coords) {
-  const triplets = _.zip(rotate(coords, -1), coords, rotate(coords, 1));
-  const offsets = _.map(triplets, function (triplet) {
-    const p = vector(triplet[1], triplet[0]);
-    const q = vector(triplet[2], triplet[1]);
-    // @ts-expect-error - TS2345 - Argument of type 'number[]' is not assignable to parameter of type 'Coord'. | TS2345 - Argument of type 'number[]' is not assignable to parameter of type 'readonly Coord[]'. | TS2345 - Argument of type 'number[]' is not assignable to parameter of type 'readonly Coord[]'.
-    const raw = Math.acos(dotProduct(p, q) / (magnitude(p) * magnitude(q)));
-    // @ts-expect-error - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    return sign(ccw(...triplet)) > 0 ? raw : -raw;
-  });
-  const sum = _.reduce(offsets, function (memo, arg) {
-    return memo + arg;
-  }, 0);
-  return _.map(offsets, function (offset) {
-    return sum > 0 ? Math.PI - offset : Math.PI + offset;
-  });
-}
-
-// Whether two polygons are similar (or if specified, congruent)
-function similar(coords1, coords2, tolerance) {
-  if (coords1.length !== coords2.length) {
-    return false;
-  }
-  const n = coords1.length;
-  const angles1 = angleMeasures(coords1);
-  const angles2 = angleMeasures(coords2);
-  const sides1 = sideLengths(coords1);
-  const sides2 = sideLengths(coords2);
-  for (let i = 0; i < 2 * n; i++) {
-    let angles = angles2.slice();
-    let sides = sides2.slice();
-
-    // Reverse angles and sides to allow matching reflected polygons
-    if (i >= n) {
-      angles.reverse();
-      sides.reverse();
-      // Since sides are calculated from two coordinates,
-      // simply reversing results in an off by one error
-      // @ts-expect-error - TS4104 - The type 'readonly number[]' is 'readonly' and cannot be assigned to the mutable type 'number[]'.
-      sides = rotate(sides, 1);
-    }
-
-    // @ts-expect-error - TS4104 - The type 'readonly number[]' is 'readonly' and cannot be assigned to the mutable type 'number[]'.
-    angles = rotate(angles, i);
-    // @ts-expect-error - TS4104 - The type 'readonly number[]' is 'readonly' and cannot be assigned to the mutable type 'number[]'.
-    sides = rotate(sides, i);
-    if (deepEq$2(angles1, angles)) {
-      const sidePairs = _.zip(sides1, sides);
-      const factors = _.map(sidePairs, function (pair) {
-        return pair[0] / pair[1];
-      });
-      const same = _.all(factors, function (factor) {
-        return eq$1(factors[0], factor);
-      });
-      const congruentEnough = _.all(sidePairs, function (pair) {
-        return number.equal(pair[0], pair[1], tolerance);
-      });
-      if (same && congruentEnough) {
-        return true;
-      }
-    }
-  }
-  return false;
-}
-
-// Given triangle with sides ABC return angle opposite side C in degrees
-function lawOfCosines(a, b, c) {
-  return Math.acos((a * a + b * b - c * c) / (2 * a * b)) * 180 / Math.PI;
-}
-function canonicalSineCoefficients([amplitude, angularFrequency, phase, verticalOffset]) {
-  // For a curve of the form f(x) = a * Sin(b * x - c) + d,
-  // this function ensures that a, b > 0, and c is its
-  // smallest possible positive value.
-
-  // Guarantee a > 0
-  if (amplitude < 0) {
-    amplitude *= -1;
-    angularFrequency *= -1;
-    phase *= -1;
-  }
-  const period = 2 * Math.PI;
-  // Guarantee b > 0
-  if (angularFrequency < 0) {
-    angularFrequency *= -1;
-    phase *= -1;
-    phase += period / 2;
-  }
-
-  // Guarantee c is smallest possible positive value
-  while (phase > 0) {
-    phase -= period;
-  }
-  while (phase < 0) {
-    phase += period;
-  }
-  return [amplitude, angularFrequency, phase, verticalOffset];
-}
-
-// e.g. rotate([1, 2, 3]) -> [2, 3, 1]
-function rotate(array, n) {
-  n = typeof n === "undefined" ? 1 : n % array.length;
-  return array.slice(n).concat(array.slice(0, n));
-}
-function getLineEquation(first, second) {
-  if (eq$1(first[0], second[0])) {
-    return "x = " + first[0].toFixed(3);
-  }
-  const m = (second[1] - first[1]) / (second[0] - first[0]);
-  const b = first[1] - m * first[0];
-  return "y = " + m.toFixed(3) + "x + " + b.toFixed(3);
-}
-
-// Stolen from the wikipedia article
-// http://en.wikipedia.org/wiki/Line-line_intersection
-function getLineIntersection(
-// TODO(LP-10725): update these to be 2-tuples
-firstPoints, secondPoints) {
-  const x1 = firstPoints[0][0];
-  const y1 = firstPoints[0][1];
-  const x2 = firstPoints[1][0];
-  const y2 = firstPoints[1][1];
-  const x3 = secondPoints[0][0];
-  const y3 = secondPoints[0][1];
-  const x4 = secondPoints[1][0];
-  const y4 = secondPoints[1][1];
-  const determinant = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
-  if (Math.abs(determinant) < 1e-9) {
-    return "Lines are parallel";
-  }
-  const x = ((x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4)) / determinant;
-  const y = ((x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4)) / determinant;
-  return "Intersection: (" + x.toFixed(3) + ", " + y.toFixed(3) + ")";
-}
-
 const {
   DeprecationMixin
 } = Util;
@@ -29738,8 +29668,8 @@ class InteractiveGraph extends React.Component {
         const correctCoeffs = this.getSinusoidCoefficients(
         // @ts-expect-error - TS2345 - Argument of type 'readonly Coord[] | undefined' is not assignable to parameter of type 'readonly Coord[]'.
         rubric.correct.coords);
-        const canonicalGuessCoeffs = canonicalSineCoefficients(guessCoeffs);
-        const canonicalCorrectCoeffs = canonicalSineCoefficients(correctCoeffs);
+        const canonicalGuessCoeffs = canonicalSineCoefficients$1(guessCoeffs);
+        const canonicalCorrectCoeffs = canonicalSineCoefficients$1(correctCoeffs);
         // If the canonical coefficients match, it's correct.
         if (deepEq$1(canonicalGuessCoeffs, canonicalCorrectCoeffs)) {
           return {
@@ -31468,7 +31398,6 @@ class LabelImage extends React.Component {
 
     // Update Perseus widget state with user selected answers without
     // triggering interaction events for listeners.
-    // @ts-expect-error - TS2345 - Argument of type 'null' is not assignable to parameter of type '(() => unknown) | undefined'.
     onChange({
       markers: updatedMarkers
     }, null, true);
@@ -41572,7 +41501,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.0.0";
+const libVersion = "19.1.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44559,15 +44488,15 @@ function injectWidgets(content, widgets) {
 }
 
 /**
- * Helper to parse Perseus JSON
+ * Helper to parse PerseusItem JSON
  * Why not just use JSON.parse? We want:
  * - To make sure types are correct
  * - To give us a central place to validate/transform output if needed
- * @param {string} input - the stringified Perseus JSON
+ * @param {string} json - the stringified PerseusItem JSON
  * @returns {PerseusItem} the parsed PerseusItem object
  */
-function parsePerseusJSON(input) {
-  return JSON.parse(input);
+function parsePerseusItem(json) {
+  return JSON.parse(json);
 }
 
 const EditorJsonify = {
@@ -44578,5 +44507,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusMarkdown, Plotter$1 as PlotterWidget, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, displaySigFigs, getAnswersFromWidgets, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, mediaQueries, parsePerseusJSON, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, traverse, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusMarkdown, Plotter$1 as PlotterWidget, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, displaySigFigs, getAnswersFromWidgets, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, traverse, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map