@khanacademy/perseus 19.0.0 → 19.1.1

package/dist/index.js

@@ -20,6 +20,7 @@ var $ = require('jquery');
 var PropTypes = require('prop-types');
 var ReactDOM = require('react-dom');
 var kmath = require('@khanacademy/kmath');
+var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
 var wonderBlocksProgressSpinner = require('@khanacademy/wonder-blocks-progress-spinner');
 var SimpleMarkdown = require('@khanacademy/simple-markdown');
 var pureMarkdown = require('@khanacademy/pure-markdown');
@@ -36,7 +37,6 @@ var reactPopper = require('react-popper');
 var createReactClass = require('create-react-class');
 var Link = require('@khanacademy/wonder-blocks-link');
 var perseusCore = require('@khanacademy/perseus-core');
-var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -194,9 +194,9 @@ class MathInput extends React__namespace.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[mathInput.mathQuillInstance.L];
+              const left = mathField.cursor()[mathInput.mathQuillInstance.L];
               if (left && left.ctrlSeq === "\\cdot ") {
-                mathField.__controller.backspace();
+                mathField.controller().backspace();
                 mathField.cmd("\\times");
               }
             } else {
@@ -1227,6 +1227,12 @@ const KhanMath = {
     return String(number);
   }
 };
+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);
@@ -1919,27 +1925,6 @@ const KhanAnswerTypes = {
 
 const ERROR_TITLE = i18n__namespace._("Oops!");
 const ERROR_MESSAGE = i18n__namespace._("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
@@ -1947,7 +1932,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
@@ -8708,54 +8693,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 $__default["default"].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 kmath.point.distanceToPoint(point1, point2);
-  },
-  /**
-   * Return the difference between two sets of coordinates
-   */
-  coordDiff: function (startCoord, endCoord) {
-    return ___default["default"].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 ___default["default"].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: {}
-};
 class Graphie$1 {
   #bounds;
   #drawingTransform;
@@ -8797,7 +8734,7 @@ class Graphie$1 {
     this.dimensions = [w, h];
     this.xpixels = w;
     this.ypixels = h;
-    this.isMobile = options.isMobile;
+    this.isMobile = options.isMobile ?? false;
     return this;
   }
 
@@ -8815,33 +8752,24 @@ class Graphie$1 {
   // - xLabelFormat: fn to format label string for x-axis
   graphInit(options) {
     options = options || {};
-    $__default["default"].each(options, function (prop, val) {
+    for (const [prop, val] of wonderStuffCore.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;
@@ -8861,7 +8789,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 (!___default["default"].isArray(unityLabels)) {
+    if (!Array.isArray(unityLabels)) {
       unityLabels = [unityLabels, unityLabels];
     }
     const minusIgnorer = function (lf) {
@@ -8936,7 +8864,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];
@@ -8963,13 +8891,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]);
             }
           }
@@ -9045,369 +8971,151 @@ class Graphie$1 {
     const processed = this.processAttributes(attrs);
     if (typeof fn === "function") {
       const oldStyle = this.currentStyle;
-      this.currentStyle = $__default["default"].extend({}, this.currentStyle, processed);
+      this.currentStyle = {
+        ...this.currentStyle,
+        ...processed
+      };
       const result = fn.call(this);
       this.currentStyle = oldStyle;
       return result;
     }
-    $__default["default"].extend(this.currentStyle, processed);
+    Object.assign(this.currentStyle, processed);
   }
-  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) {}
-
-  // line is a stub that gets overwritten with a function from drawingTools
-  // in createGraphie
-  line(start, end) {}
-  svgPath = (points, alreadyScaled) => {
-    return $__default["default"].map(points, (point, i) => {
-      if (point === true) {
-        return "z";
-      }
-      const scaled = alreadyScaled ? point : this.scalePoint(point);
-      return (i === 0 ? "M" : "L") + KhanMath.bound(scaled[0]) + " " + KhanMath.bound(scaled[1]);
-    }).join("");
-  };
-  svgParabolaPath = (a, b, c) => {
-    const computeParabola = function (x) {
-      return (a * x + b) * x + c;
-    };
-
-    // 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);
-    }
-
-    // Calculate x coordinates of points on parabola
-    const xVertex = -b / (2 * a);
-    const distToEdge = Math.max(Math.abs(xVertex - this.bounds().xMin), Math.abs(xVertex - this.bounds().xMax));
-
-    // To guarantee that drawn parabola to spans the viewport, use a point
-    // on the edge of the graph furtherest from the vertex
-    const xPoint = xVertex + distToEdge;
-
-    // Compute parabola and other point on the curve
-    const vertex = [xVertex, computeParabola(xVertex)];
-    const point = [xPoint, computeParabola(xPoint)];
-
-    // Calculate SVG 'control' point, defined by spec
-    const control = [vertex[0], vertex[1] - (point[1] - vertex[1])];
-
-    // Calculate mirror points across parabola's axis of symmetry
-    const dx = Math.abs(vertex[0] - point[0]);
-    const left = [vertex[0] - dx, point[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 = ___default["default"].map([left, control, right], this.scalePoint);
-    const values = ___default["default"].map(___default["default"].flatten(points), KhanMath.bound);
-    return "M" + values[0] + "," + values[1] + " Q" + values[2] + "," + values[3] + " " + values[4] + "," + values[5];
-  };
-  svgSinusoidPath = (a, b, c, d) => {
-    // Plot a sinusoid of the form: f(x) = a * sin(b * x - c) + d
-    const quarterPeriod = Math.abs(Math.PI / (2 * b));
-    const computeSine = function (x) {
-      return a * Math.sin(b * x - c) + d;
-    };
-    const computeDerivative = function (x) {
-      return a * b * Math.cos(c - b * x);
-    };
-    const coordsForOffset = (initial, i) => {
-      // Return the cubic coordinates (including the two anchor and two
-      // control points) for the ith portion of the sinusoid.
-      const x0 = initial + quarterPeriod * i;
-      const x1 = x0 + quarterPeriod;
-
-      // Interpolate using derivative technique
-      // 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 ___default["default"].map(___default["default"].zip(xCoords, yCoords), this.scalePoint);
-    };
-
-    // How many quarter-periods do we need to span the graph?
-    const extent = this.bounds().width();
-    const numQuarterPeriods = Math.ceil(extent / quarterPeriod) + 1;
-
-    // Find starting coordinate: first anchor point curve left of bounds.xMin
-    let initial = c / b;
-    const distToEdge = initial - this.bounds().xMin;
-    initial -= quarterPeriod * Math.ceil(distToEdge / quarterPeriod);
-
-    // First portion of path is special-case, requiring move-to ('M')
-    let coords = coordsForOffset(initial, 0);
-    let path = "M" + coords[0][0] + "," + coords[0][1] + " C" + coords[1][0] + "," + coords[1][1] + " " + coords[2][0] + "," + coords[2][1] + " " + coords[3][0] + "," + coords[3][1];
-    for (let i = 1; i < numQuarterPeriods; i++) {
-      coords = coordsForOffset(initial, i);
-      path += " C" + coords[1][0] + "," + coords[1][1] + " " + coords[2][0] + "," + coords[2][1] + " " + coords[3][0] + "," + coords[3][1];
-    }
-    return path;
-  };
-  scalePoint = point => {
-    return this.drawingTransform().scalePoint(point);
-  };
-  scaleVector = point => {
-    return this.drawingTransform().scaleVector(point);
-  };
-  unscalePoint = point => {
-    return this.drawingTransform().unscalePoint(point);
-  };
-  unscaleVector = point => {
-    return this.drawingTransform().unscaleVector(point);
-  };
-  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
-
-        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]
-        };
+  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]]));
       }
-    };
-    const processed = {};
-    $__default["default"].each(attrs || {}, function (key, value) {
-      const transformer = transformers[key];
-      if (typeof transformer === "function") {
-        $__default["default"].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;
+      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;
     });
-    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]
-};
+  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);
 
-/**
- * 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 (span, size) {
-    const $span = $__default["default"](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])
-      });
-    }
-  };
-
-  // `svgPath` is independent of graphie range, so we export it independently
-  GraphUtils.svgPath = thisGraphie.svgPath;
-  const addArrowheads = function arrows(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 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.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({
-          "stroke-linejoin": "round",
-          "stroke-linecap": "round"
-        });
-        head.arrowheadsDrawn = true;
-        set.push(subpath);
-        set.push(head);
-        return set;
-      }
-    } else if (type === raphael.exports.st) {
-      for (let i = 0, l = path.items.length; i < l; i++) {
-        arrows(path.items[i]);
-      }
-    }
-    return path;
-  };
-  function circle(center, radius) {
-    return thisGraphie.raphael.ellipse(...thisGraphie.scalePoint(center).concat(thisGraphie.scaleVector([radius, radius])));
+      // We round the coordinates to make testing easier, because trig
+      // operations return unround numbers.
+      // TODO(benchristel): move rounding to scalePoint?
+      const round = x => kmath.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])));
   }
 
   // (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;
+  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;
+    });
   }
-  function ellipse(center, radii) {
-    return thisGraphie.raphael.ellipse(...thisGraphie.scalePoint(center).concat(thisGraphie.scaleVector(radii)));
+  ellipse(center, radii, style) {
+    return this.withStyle(style, () => this.raphael.ellipse(...this.scalePoint(center).concat(this.scaleVector(radii))));
   }
-  function fixedEllipse(center,
+  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");
-    $__default["default"](wrapper).css({
-      position: "absolute",
-      width: width + "px",
-      height: height + "px",
-      left: left + "px",
-      top: top + "px"
-    });
-    // wrapper.setAttribute("data-graphie-type", "ellipse");
+  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");
+      $__default["default"](wrapper).css({
+        position: "absolute",
+        width: width + "px",
+        height: height + "px",
+        left: left + "px",
+        top: top + "px"
+      });
+      // wrapper.setAttribute("data-graphie-type", "ellipse");
 
-    // 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
-    };
+      // 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
+      };
+    });
   }
-  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));
+  unstyledPath(points) {
+    const p = this.raphael.path(this.svgPath(points));
     p.graphiePath = points;
     return p;
   }
-  function fixedPath(points, center, createPath) {
-    points = ___default["default"].map(points, thisGraphie.scalePoint);
-    center = center ? thisGraphie.scalePoint(center) : null;
-    createPath = createPath || thisGraphie.svgPath;
-    const pathLeft = ___default["default"].min(___default["default"].pluck(points, 0));
-    const pathRight = ___default["default"].max(___default["default"].pluck(points, 0));
-    const pathTop = ___default["default"].min(___default["default"].pluck(points, 1));
-    const pathBottom = ___default["default"].max(___default["default"].pluck(points, 1));
+  path(points, style) {
+    return this.withStyle(style, () => {
+      return this.unstyledPath(points);
+    });
+  }
+
+  // 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 extraOffset = [pathLeft, pathTop];
+    const topLeftOfBoundingBox = [pathLeft, pathTop];
 
-    // Apply padding and offset to points
-    points = ___default["default"].map(points, function (point) {
-      return kmath.vector.add(kmath.vector.subtract(point, extraOffset), kmath.vector.scale(padding, 0.5));
+    // Apply padding and offset to points to convert from
+    // canvas coordinates to pixel coordinates relative to bounding box
+    points = points.map(function (point) {
+      return kmath.vector.add(kmath.vector.subtract(point, topLeftOfBoundingBox), kmath.vector.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;
+    const left = topLeftOfBoundingBox[0] - padding[0] / 2;
+    const top = topLeftOfBoundingBox[1] - padding[1] / 2;
 
     // Create <div>
     const wrapper = document.createElement("div");
@@ -9433,29 +9141,32 @@ GraphUtils.createGraphie = function (el) {
       visibleShape: visibleShape
     };
   }
-  function scaledPath(points) {
-    const p = thisGraphie.raphael.path(thisGraphie.svgPath(points, /* alreadyScaled */true));
-    p.graphiePath = points;
-    return p;
+  scaledPath(points, style) {
+    return this.withStyle(style, () => {
+      const p = this.raphael.path(this.svgPath(points, /* alreadyScaled */true));
+      p.graphiePath = points;
+      return p;
+    });
   }
-  function line(start, end) {
-    const l = path([start, end]);
-    if (thisGraphie.isMobile) {
-      l.node.style.shapeRendering = "crispEdges";
-    }
-    return l;
+  line(start, end, style) {
+    return this.withStyle(style, () => {
+      const l = this.unstyledPath([start, end]);
+      if (this.isMobile) {
+        l.node.style.shapeRendering = "crispEdges";
+      }
+      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));
+  parabola(a, b, c, style) {
+    return this.withStyle(style, () => this.raphael.path(this.svgParabolaPath(a, b, c)));
   }
-  function fixedLine(start, end, thickness) {
+  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);
+    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])];
@@ -9495,250 +9206,469 @@ GraphUtils.createGraphie = function (el) {
       visibleShape: visibleShape
     };
   }
-  function sinusoid(a, b, c, d) {
+  sinusoid(a, b, c, d, style) {
+    return this.withStyle(style, () =>
     // 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 = $__default["default"]("<span>").addClass("graphie-label");
-    const pad = thisGraphie.currentStyle["label-distance"];
-    $span.css($__default["default"].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);
+    this.raphael.path(this.svgSinusoidPath(a, b, c, d)));
+  }
+  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 = $__default["default"]("<span>").addClass("graphie-label");
+      const pad = this.currentStyle["label-distance"];
       $span.css({
-        left: scaledPoint[0],
-        top: scaledPoint[1]
-      });
-    };
+        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 '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 'processMath' does not exist on type 'JQuery<HTMLElement>'.
-    $span.processMath = function (math, force) {
-      processMath$1(span, math, force, function () {
+      // @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]);
-      });
-    };
-
-    // @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) {
-    let fn2 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 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;
+      };
+      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;
+    });
+  };
+  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)];
         }
-        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);
+        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);
         }
-      } 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);
+        lastY = y;
       }
-      lastDiff = diff;
-    }
-    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));
+      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();
       }
-    }
-    paths.push(path(points));
-    return paths;
+      const parametricFn = x => [x, fn(x)];
+      return this.plotParametric(parametricFn, range);
+    });
   }
-  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();
+  svgPath = (points, alreadyScaled) => {
+    return points.map((point, i) => {
+      if (point === true) {
+        return "z";
+      }
+      const scaled = alreadyScaled ? point : this.scalePoint(point);
+      return (i === 0 ? "M" : "L") + KhanMath.bound(scaled[0]) + " " + KhanMath.bound(scaled[1]);
+    }).join("");
+  };
+  svgParabolaPath = (a, b, c) => {
+    const computeParabola = function (x) {
+      return (a * x + b) * x + c;
+    };
+
+    // 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)]];
+      return this.svgPath(points);
     }
-    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);
+
+    // Calculate x coordinates of points on parabola
+    const xVertex = -b / (2 * a);
+    const distToEdge = Math.max(Math.abs(xVertex - this.bounds().xMin), Math.abs(xVertex - this.bounds().xMax));
+
+    // To guarantee that drawn parabola to spans the viewport, use a point
+    // on the edge of the graph furtherest from the vertex
+    const xPoint = xVertex + distToEdge;
+
+    // Compute parabola and other point on the curve
+    const vertex = [xVertex, computeParabola(xVertex)];
+    const point = [xPoint, computeParabola(xPoint)];
+
+    // Calculate SVG 'control' point, defined by spec
+    const control = [vertex[0], vertex[1] - (point[1] - vertex[1])];
+
+    // Calculate mirror points across parabola's axis of symmetry
+    const dx = Math.abs(vertex[0] - point[0]);
+    const left = [vertex[0] - dx, point[1]];
+    const right = [vertex[0] + dx, point[1]];
+
+    // Scale and 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];
+  };
+  svgSinusoidPath = (a, b, c, d) => {
+    // Plot a sinusoid of the form: f(x) = a * sin(b * x - c) + d
+    const quarterPeriod = Math.abs(Math.PI / (2 * b));
+    const computeSine = function (x) {
+      return a * Math.sin(b * x - c) + d;
+    };
+    const computeDerivative = function (x) {
+      return a * b * Math.cos(c - b * x);
+    };
+    const coordsForOffset = (initial, i) => {
+      // Return the cubic coordinates (including the two anchor and two
+      // control points) for the ith portion of the sinusoid.
+      const x0 = initial + quarterPeriod * i;
+      const x1 = x0 + quarterPeriod;
+
+      // Interpolate using derivative technique
+      // 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)];
+      const points = kmath.vector.zip(xCoords, yCoords);
+      return points.map(this.scalePoint);
+    };
+
+    // How many quarter-periods do we need to span the graph?
+    const extent = this.bounds().width();
+    const numQuarterPeriods = Math.ceil(extent / quarterPeriod) + 1;
+
+    // Find starting coordinate: first anchor point curve left of bounds.xMin
+    let initial = c / b;
+    const distToEdge = initial - this.bounds().xMin;
+    initial -= quarterPeriod * Math.ceil(distToEdge / quarterPeriod);
+
+    // First portion of path is special-case, requiring move-to ('M')
+    let coords = coordsForOffset(initial, 0);
+    let path = "M" + coords[0][0] + "," + coords[0][1] + " C" + coords[1][0] + "," + coords[1][1] + " " + coords[2][0] + "," + coords[2][1] + " " + coords[3][0] + "," + coords[3][1];
+    for (let i = 1; i < numQuarterPeriods; i++) {
+      coords = coordsForOffset(initial, i);
+      path += " C" + coords[1][0] + "," + coords[1][1] + " " + coords[2][0] + "," + coords[2][1] + " " + coords[3][0] + "," + coords[3][1];
+    }
+    return path;
+  };
+  withStyle(style, fn) {
+    const oldStyle = this.currentStyle;
+    this.currentStyle = {
+      ...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);
       }
-      return plotParametric(function (y) {
-        return [fn(y), y];
-      }, range, shade);
+    } else if (result instanceof $__default["default"]) {
+      // 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({
+        ...this.currentStyle,
+        ...SVG_SPECIFIC_STYLE_MASK
+      });
     }
-    if (fn2) {
-      if (shade) {
-        return plotParametric(function (x) {
-          return [x, fn(x)];
-        }, range, shade, function (x) {
-          return [x, fn2(x)];
+    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 = 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 = 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, 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"
         });
+        head.arrowheadsDrawn = true;
+        set.push(subpath);
+        set.push(head);
+        return set;
+      }
+    } else if (type === raphael.exports.st) {
+      for (let i = 0, l = path.items.length; i < l; i++) {
+        this.addArrowheads(path.items[i]);
       }
-      throw new PerseusError("fn2 should only be set when 'shade' is True.", Errors.Internal);
     }
-    return plotParametric(function (x) {
-      return [x, fn(x)];
-    }, range, shade);
+    return path;
   }
-  const drawingTools = {
-    circle,
-    rect,
-    ellipse,
-    fixedEllipse,
-    arc,
-    path,
-    fixedPath,
-    scaledPath,
-    line,
-    parabola,
-    fixedLine,
-    sinusoid,
-    grid,
-    label,
-    plotParametric,
-    plot
-  };
-  function graphify(drawingFn) {
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      const last = args[args.length - 1];
-      const oldStyle = thisGraphie.currentStyle;
-      let result;
+  scalePoint = point => {
+    return this.drawingTransform().scalePoint(point);
+  };
+  scaleVector = point => {
+    return this.drawingTransform().scaleVector(point);
+  };
+  unscalePoint = point => {
+    return this.drawingTransform().unscalePoint(point);
+  };
+  unscaleVector = point => {
+    return this.drawingTransform().unscaleVector(point);
+  };
+  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
 
-      // The last argument is probably trying to change the style
-      if (typeof last === "object" && !___default["default"].isArray(last)) {
-        thisGraphie.currentStyle = {
-          ...thisGraphie.currentStyle,
-          ...thisGraphie.processAttributes(last)
+        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]
         };
-        const rest = [].slice.call(args, 0, args.length - 1);
-        result = drawingFn(...rest);
-      } else {
-        thisGraphie.currentStyle = $__default["default"].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 $__default["default"]) {
-        // 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({
-          ...thisGraphie.currentStyle,
-          ...SVG_SPECIFIC_STYLE_MASK
-        });
       }
-      thisGraphie.currentStyle = oldStyle;
-      return result;
     };
+    const processed = {};
+    Object.entries(attrs || {}).forEach(function (_ref) {
+      let [key, value] = _ref;
+      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;
+      }
+    });
+    return processed;
   }
-  $__default["default"].each(drawingTools, function (name) {
-    thisGraphie[name] = graphify(drawingTools[name]);
-  });
-  return thisGraphie;
+}
+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 getXAndYRanges(range) {
+    if (Array.isArray(range)) {
+      return range;
+    } else {
+      return [range, range];
+    }
+  }
+  if (range == null) {
+    return range;
+  }
+  const [xRange, yRange] = getXAndYRanges(range);
+  return [normalizeInterval(xRange), normalizeInterval(yRange)];
+}
+function toPair(x) {
+  if (Array.isArray(x)) {
+    return x;
+  }
+  return [x, x];
+}
+
+/**
+ * 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 (span, size) {
+  const $span = $__default["default"](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])
+    });
+  }
+};
+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 "";
+    }
+    return points.map(function (point, i) {
+      if (point === true) {
+        return "z";
+      }
+      return (i === 0 ? "M" : "L") + point[0] + " " + point[1];
+    }).join("");
+  },
+  getDistance: function (point1, point2) {
+    return kmath.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 (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
+    }
+    return GraphUtils.findAngle(point1, vertex) - GraphUtils.findAngle(point2, vertex);
+  },
+  graphs: {}
 };
 
 /* eslint-disable */
@@ -10456,15 +10386,65 @@ const WrappedPath = function (graphie, points, options) {
 };
 ___default["default"].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 ___default["default"].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 = ___default["default"].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 ___default["default"].map(___default["default"].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 = ___default["default"].zip(points, points.slice(1).concat(points.slice(0, 1)));
   const areas = ___default["default"].map(segments, function (segment) {
@@ -10474,17 +10454,165 @@ function clockwise$1(points) {
   });
   return sum$1(areas) > 0;
 }
-
-/* vector-add multiple [x, y] coords/vectors */
-function addPoints() {
-  const zipped = ___default["default"].zip(...arguments);
-  return ___default["default"].map(zipped, sum$1);
+function magnitude(v) {
+  return Math.sqrt(___default["default"].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 ___default["default"].map(vector, function (coord) {
-    return coord * -1;
+function dotProduct(a, b) {
+  return ___default["default"].reduce(___default["default"].zip(a, b), function (memo, pair) {
+    return memo + pair[0] * pair[1];
+  }, 0);
+}
+function sideLengths(coords) {
+  const segments = ___default["default"].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 = ___default["default"].zip(rotate(coords, -1), coords, rotate(coords, 1));
+  const offsets = ___default["default"].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 = ___default["default"].reduce(offsets, function (memo, arg) {
+    return memo + arg;
+  }, 0);
+  return ___default["default"].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 = ___default["default"].zip(sides1, sides);
+      const factors = ___default["default"].map(sidePairs, function (pair) {
+        return pair[0] / pair[1];
+      });
+      const same = ___default["default"].all(factors, function (factor) {
+        return eq$1(factors[0], factor);
+      });
+      const congruentEnough = ___default["default"].all(sidePairs, function (pair) {
+        return kmath.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(_ref) {
+  let [amplitude, angularFrequency, phase, verticalOffset] = _ref;
+  // 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;
@@ -10661,10 +10789,10 @@ ___default["default"].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 = kmath.vector.add(sVertex, scaledPolarDeg(sRadius, startAngle));
+      const v2 = kmath.vector.add(sVertex, scaledPolarDeg(sRadius, endAngle));
       sRadius *= Math.SQRT2;
-      const v3 = addPoints(sVertex, scaledPolarDeg(sRadius, halfAngle));
+      const v3 = kmath.vector.add(sVertex, scaledPolarDeg(sRadius, halfAngle));
       ___default["default"].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));
@@ -10685,7 +10813,7 @@ ___default["default"].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 = kmath.vector.add(sVertex, sOffset);
       const position = graphie.unscalePoint(sPosition);
 
       // Reuse label if possible
@@ -10736,7 +10864,7 @@ ___default["default"].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 = [kmath.vector.add(sMidpoint, sOffsetVector, sHeightVector), kmath.vector.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));
@@ -10763,7 +10891,7 @@ ___default["default"].extend(GraphUtils.Graphie.prototype, {
         if (start !== p1) {
           sOffsetVector = reverseVector(sOffsetVector);
         }
-        const sEnd = addPoints(sMidpoint, sOffsetVector);
+        const sEnd = kmath.vector.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));
@@ -10779,7 +10907,7 @@ ___default["default"].extend(GraphUtils.Graphie.prototype, {
       }
       const sOffset = 20;
       const sOffsetVector = scaledPolarRad(sOffset, perpendicularAngle);
-      const sPosition = addPoints(sMidpoint, sOffsetVector);
+      const sPosition = kmath.vector.add(sMidpoint, sOffsetVector);
       const position = graphie.unscalePoint(sPosition);
 
       // Reuse label if possible
@@ -10837,7 +10965,7 @@ ___default["default"].extend(GraphUtils.Graphie.prototype, {
     }
     const sRadius = 10 + scaledDistanceFromAngle(360 - angle);
     const sOffsetVector = scaledPolarDeg(sRadius, halfAngle);
-    const sPosition = addPoints(sVertex, sOffsetVector);
+    const sPosition = kmath.vector.add(sVertex, sOffsetVector);
     const position = graphie.unscalePoint(sPosition);
 
     // Reuse label if possible
@@ -12688,7 +12816,7 @@ ___default["default"].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: kmath.vector.add
 });
 function Protractor(graph, center) {
   // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
@@ -13042,7 +13170,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,
@@ -13286,12 +13414,12 @@ ___default["default"].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 = kmath.vector.add(newVertex, reverseVector(oldVertex));
       let valid = true;
       const newPoints = {};
       ___default["default"].each([0, 2], function (i) {
         const oldPoint = points[i].coord;
-        let newPoint = addPoints(oldPoint, delta);
+        let newPoint = kmath.vector.add(oldPoint, delta);
         let angle = GraphUtils.findAngle(newVertex, newPoint);
         angle *= Math.PI / 180;
         newPoint = graphie.constrainToBoundsOnAngle(newPoint, 10, angle);
@@ -13328,7 +13456,7 @@ ___default["default"].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 kmath.vector.add(vertex, polar(distance, angle));
         }
         return true;
       };
@@ -13479,7 +13607,7 @@ ___default["default"].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
@@ -13576,7 +13704,7 @@ const createSimpleClass = function (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;
@@ -16039,7 +16167,7 @@ var Movables = {
 const GraphieMovable = GraphieClasses.GraphieMovable;
 const createGraphie = GraphUtils.createGraphie;
 const {
-  deepEq: deepEq$3,
+  deepEq: deepEq$2,
   nestedMap
 } = Util;
 const {
@@ -16074,7 +16202,7 @@ class Graphie extends React__namespace.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();
@@ -19164,10 +19292,19 @@ class Renderer extends React__namespace.Component {
     });
   };
   _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 = {};
+    wonderStuffCore.entries(allWidgetInfo).forEach(_ref => {
+      let [key, widgetInfo] = _ref;
+      widgetsStartProps[key] = getRendererPropsForWidgetInfo(widgetInfo, problemNum);
     });
+
+    // Call the onWidgetStartProps callback if it exists
+    apiOptions?.onWidgetStartProps?.(widgetsStartProps);
+    return widgetsStartProps;
   };
 
   // This is only used in _getWidgetInfo as a fallback if widgetId
@@ -19735,10 +19872,10 @@ class Renderer extends React__namespace.Component {
       }, /*#__PURE__*/React__namespace.createElement(ErrorBoundary, null, /*#__PURE__*/React__namespace.createElement("div", {
         className: "perseus-block-math-inner",
         style: innerStyle
-      }, /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref => {
+      }, /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref2 => {
         let {
           setAssetStatus
-        } = _ref;
+        } = _ref2;
         return /*#__PURE__*/React__namespace.createElement(Tex, {
           setAssetStatus: setAssetStatus
         }, content);
@@ -19760,10 +19897,10 @@ class Renderer extends React__namespace.Component {
           // wrap to the next line
           whiteSpace: "nowrap"
         }
-      }, /*#__PURE__*/React__namespace.createElement(ErrorBoundary, null, /*#__PURE__*/React__namespace.createElement("span", null), /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref2 => {
+      }, /*#__PURE__*/React__namespace.createElement(ErrorBoundary, null, /*#__PURE__*/React__namespace.createElement("span", null), /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref3 => {
         let {
           setAssetStatus
-        } = _ref2;
+        } = _ref3;
         return /*#__PURE__*/React__namespace.createElement(Tex, {
           onRender: this.props.onRender,
           setAssetStatus: setAssetStatus
@@ -19791,10 +19928,10 @@ class Renderer extends React__namespace.Component {
       const responsive = !state.inTable;
       return /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
         key: state.key
-      }, /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref3 => {
+      }, /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref4 => {
         let {
           setAssetStatus
-        } = _ref3;
+        } = _ref4;
         return /*#__PURE__*/React__namespace.createElement(SvgImage, _extends({
           setAssetStatus: setAssetStatus
           // @ts-expect-error - TS2322 - Type 'string | null | undefined' is not assignable to type 'string | undefined'.
@@ -25554,7 +25691,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.
@@ -25735,7 +25872,7 @@ const Sinusoid = ___default["default"].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 = ___default["default"].extend({}, PlotDefaults, {
@@ -27970,213 +28107,6 @@ class Graph extends React__namespace.Component {
   }
 }
 
-/**
- * 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 = ___default["default"].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 ___default["default"].map(___default["default"].zip(a, b), function (pair) {
-    return pair[0] - pair[1];
-  });
-}
-function magnitude(v) {
-  return Math.sqrt(___default["default"].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 ___default["default"].reduce(___default["default"].zip(a, b), function (memo, pair) {
-    return memo + pair[0] * pair[1];
-  }, 0);
-}
-function sideLengths(coords) {
-  const segments = ___default["default"].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 = ___default["default"].zip(rotate(coords, -1), coords, rotate(coords, 1));
-  const offsets = ___default["default"].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 = ___default["default"].reduce(offsets, function (memo, arg) {
-    return memo + arg;
-  }, 0);
-  return ___default["default"].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 = ___default["default"].zip(sides1, sides);
-      const factors = ___default["default"].map(sidePairs, function (pair) {
-        return pair[0] / pair[1];
-      });
-      const same = ___default["default"].all(factors, function (factor) {
-        return eq$1(factors[0], factor);
-      });
-      const congruentEnough = ___default["default"].all(sidePairs, function (pair) {
-        return kmath.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(_ref) {
-  let [amplitude, angularFrequency, phase, verticalOffset] = _ref;
-  // 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, react/no-unsafe, react/sort-comp */
 const {
   DeprecationMixin
@@ -29849,8 +29779,8 @@ class InteractiveGraph extends React__namespace.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 {
@@ -31569,7 +31499,6 @@ class LabelImage extends React__namespace.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);
@@ -41687,7 +41616,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "19.0.0";
+const libVersion = "19.1.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44659,15 +44588,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 = {
@@ -44739,7 +44668,7 @@ exports.itemToTree = itemToTree;
 exports.itemVersion = ItemVersion;
 exports.libVersion = libVersion;
 exports.mediaQueries = mediaQueries;
-exports.parsePerseusJSON = parsePerseusJSON;
+exports.parsePerseusItem = parsePerseusItem;
 exports.plotterPlotTypes = plotterPlotTypes;
 exports.preprocessTex = preprocessTex;
 exports.registerAllWidgetsForTesting = registerAllWidgetsForTesting;