@khanacademy/perseus 3.0.0 → 4.0.0

package/src/util/interactive.js

@@ -1,4078 +0,0 @@
-/* eslint-disable @babel/no-invalid-this */
-// @flow
-/**
- * Interactive graphie utilities.
- *
- * This file exposes a couple functions, but mostly it adds functions to the
- * `Graphie` prototype for dealing with interactive graphie elements.
- */
-
-// TODO(emily): This file breaks our line length limits like nobody's business.
-// Figure out how to fix that.
-import {
-    vector as kvector,
-    point as kpoint,
-    line as kline,
-} from "@khanacademy/kmath";
-import $ from "jquery";
-// eslint-disable-next-line import/no-extraneous-dependencies
-import Raphael from "raphael";
-import _ from "underscore";
-
-// NOTE(jeresig): We include a special copy of jQuery vmouse so
-// that Perseus will continue to work in mobile native devices
-// (this should have no impact in the browser)
-// eslint-disable-next-line import/no-unassigned-import
-import "../jquery.mobile.vmouse.js";
-import InteractiveUtil from "../interactive2/interactive-util.js";
-import WrappedEllipse from "../interactive2/wrapped-ellipse.js";
-import WrappedLine from "../interactive2/wrapped-line.js";
-import WrappedPath from "../interactive2/wrapped-path.js";
-import {Errors} from "../logging/log.js";
-import {PerseusError} from "../perseus-error.js";
-
-import KhanColors from "./colors.js";
-import GraphUtils from "./graphie.js";
-import KhanMath from "./math.js";
-
-import type {Coord} from "../interactive2/types.js";
-
-const {getCanUse3dTransform} = InteractiveUtil;
-
-function sum(array) {
-    return _.reduce(
-        array,
-        function (memo, arg) {
-            return memo + arg;
-        },
-        0,
-    );
-}
-
-function clockwise(points) {
-    const segments = _.zip(points, points.slice(1).concat(points.slice(0, 1)));
-    const areas = _.map(segments, function (segment) {
-        const p1 = segment[0];
-        const p2 = segment[1];
-        return (p2[0] - p1[0]) * (p2[1] + p1[1]);
-    });
-    return sum(areas) > 0;
-}
-
-/* vector-add multiple [x, y] coords/vectors */
-function addPoints(...points) {
-    const zipped = _.zip(...points);
-    return _.map(zipped, sum);
-}
-
-function reverseVector(vector) {
-    return _.map(vector, function (coord) {
-        return coord * -1;
-    });
-}
-
-function scaledDistanceFromAngle(angle) {
-    const a = 3.51470560176242 * 20;
-    const b = 0.5687298702748785 * 20;
-    const c = -0.037587715462826674;
-    return (a - b) * Math.exp(c * angle) + b;
-}
-
-function scaledPolarRad(radius, radians) {
-    return [
-        radius * Math.cos(radians),
-        radius * Math.sin(radians) * -1, // SVG flips y axis
-    ];
-}
-
-function scaledPolarDeg(radius, degrees) {
-    const radians = (degrees * Math.PI) / 180;
-    return scaledPolarRad(radius, radians);
-}
-
-// Global dragging state
-let dragging = false;
-
-const InteractiveUtils: $FlowFixMe = {
-    // Useful for shapes that are only sometimes drawn. If a shape isn't
-    // needed, it can be replaced with bogusShape which just has stub methods
-    // that successfully do nothing.
-    // The alternative would be 'if..typeof' checks all over the place.
-    bogusShape: {
-        animate: function () {},
-        attr: function () {},
-        remove: function () {},
-    },
-};
-
-_.extend(GraphUtils.Graphie.prototype, {
-    // graphie puts text spans on top of the SVG, which looks good, but gets
-    // in the way of mouse events. This adds another SVG element on top
-    // of everything else where we can add invisible shapes with mouse
-    // handlers wherever we want.
-    addMouseLayer: function (options) {
-        const graph = this;
-        options = _.extend(
-            {
-                allowScratchpad: false,
-                setDrawingAreaAvailable: function () {},
-            },
-            options,
-        );
-
-        const mouselayerZIndex = 2;
-        graph.mouselayer = Raphael(
-            graph.raphael.canvas.parentNode,
-            graph.xpixels,
-            graph.ypixels,
-        );
-        $(graph.mouselayer.canvas).css("z-index", mouselayerZIndex);
-        if (
-            options.onClick ||
-            options.onMouseDown ||
-            options.onMouseMove ||
-            options.onMouseOver ||
-            options.onMouseOut
-        ) {
-            const canvasClickTarget = graph.mouselayer
-                .rect(0, 0, graph.xpixels, graph.ypixels)
-                .attr({
-                    fill: "#000",
-                    opacity: 0,
-                });
-            let isClickingCanvas = false;
-
-            $(graph.mouselayer.canvas).on("vmousedown", function (e) {
-                if (e.target === canvasClickTarget[0]) {
-                    if (options.onMouseDown) {
-                        options.onMouseDown(graph.getMouseCoord(e));
-                    }
-                    isClickingCanvas = true;
-
-                    if (options.onMouseMove) {
-                        $(document).bind("vmousemove.mouseLayer", function (e) {
-                            if (isClickingCanvas) {
-                                e.preventDefault();
-                                options.onMouseMove(graph.getMouseCoord(e));
-                            }
-                        });
-                    }
-
-                    $(document).bind("vmouseup.mouseLayer", function (e) {
-                        $(document).unbind(".mouseLayer");
-
-                        // Only register clicks that started on the canvas,
-                        // and not on another mouseLayer target
-                        if (isClickingCanvas && options.onClick) {
-                            options.onClick(graph.getMouseCoord(e));
-                        }
-                        isClickingCanvas = false;
-                    });
-                }
-            });
-            if (options.onMouseOver) {
-                $(graph.mouselayer.canvas).on("vmouseover", function (e) {
-                    options.onMouseOver(graph.getMouseCoord(e));
-                });
-            }
-            if (options.onMouseOut) {
-                $(graph.mouselayer.canvas).on("vmouseout", function (e) {
-                    options.onMouseOut(graph.getMouseCoord(e));
-                });
-            }
-        }
-        if (!options.allowScratchpad) {
-            options.setDrawingAreaAvailable(false);
-        }
-
-        // Add mouse and visible wrapper layers for DOM-node-wrapped movables
-        graph._mouselayerWrapper = document.createElement("div");
-        $(graph._mouselayerWrapper).css({
-            position: "absolute",
-            left: 0,
-            top: 0,
-            zIndex: mouselayerZIndex,
-        });
-
-        graph._visiblelayerWrapper = document.createElement("div");
-        $(graph._visiblelayerWrapper).css({
-            position: "absolute",
-            left: 0,
-            top: 0,
-        });
-
-        const el = graph.raphael.canvas.parentNode;
-        el.appendChild(graph._visiblelayerWrapper);
-        el.appendChild(graph._mouselayerWrapper);
-
-        // Add functions for adding to wrappers
-        graph.addToMouseLayerWrapper = function (el) {
-            this._mouselayerWrapper.appendChild(el);
-        };
-        graph.addToVisibleLayerWrapper = function (el) {
-            this._visiblelayerWrapper.appendChild(el);
-        };
-    },
-
-    /**
-     * Get mouse coordinates in pixels
-     */
-    getMousePx: function (event) {
-        const graphie = this;
-
-        const mouseX =
-            event.pageX - $(graphie.raphael.canvas.parentNode).offset().left;
-        const mouseY =
-            event.pageY - $(graphie.raphael.canvas.parentNode).offset().top;
-
-        return [mouseX, mouseY];
-    },
-
-    /**
-     * Get mouse coordinates in graph coordinates
-     */
-    getMouseCoord: function (event) {
-        return this.unscalePoint(this.getMousePx(event));
-    },
-
-    /**
-     * Unlike all other Graphie-related code, the following three functions use
-     * a lot of scaled coordinates (so that labels appear the same size
-     * regardless of current shape/figure scale). These are prefixed with 's'.
-     */
-    labelAngle: function (options) {
-        const graphie = this;
-
-        _.defaults(options, {
-            point1: [0, 0],
-            vertex: [0, 0],
-            point3: [0, 0],
-            label: null,
-            numArcs: 1,
-            showRightAngleMarker: true,
-            pushOut: 0,
-            clockwise: false,
-            style: {},
-        });
-
-        let text = options.text === undefined ? "" : options.text;
-        const vertex = options.vertex;
-        const sVertex = graphie.scalePoint(vertex);
-        let p1;
-        let p3;
-        if (options.clockwise) {
-            p1 = options.point1;
-            p3 = options.point3;
-        } else {
-            p1 = options.point3;
-            p3 = options.point1;
-        }
-
-        const startAngle = GraphUtils.findAngle(p1, vertex);
-        const endAngle = GraphUtils.findAngle(p3, vertex);
-        const angle = (endAngle + 360 - startAngle) % 360;
-        const halfAngle = (startAngle + angle / 2) % 360;
-        const sPadding = 5 * options.pushOut;
-        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));
-
-            sRadius *= Math.SQRT2;
-            const v3 = addPoints(sVertex, scaledPolarDeg(sRadius, halfAngle));
-
-            _.each([v1, v2], function (v) {
-                temp.push(graphie.scaledPath([v, v3], options.style));
-            });
-        } else {
-            // Draw arcs
-            _.times(options.numArcs, function (i) {
-                temp.push(
-                    graphie.arc(
-                        vertex,
-                        graphie.unscaleVector(sRadius),
-                        startAngle,
-                        endAngle,
-                        options.style,
-                    ),
-                );
-                sRadius += 3;
-            });
-        }
-
-        if (text) {
-            const match = text.match(/\$deg(\d)?/);
-            if (match) {
-                const precision = match[1] || 1;
-                text = text.replace(
-                    match[0],
-                    KhanMath.toFixedApprox(angle, precision) + "^{\\circ}",
-                );
-            }
-
-            const sOffset = scaledPolarDeg(sRadius + 15, halfAngle);
-            const sPosition = addPoints(sVertex, sOffset);
-            const position = graphie.unscalePoint(sPosition);
-
-            // Reuse label if possible
-            if (options.label) {
-                options.label.setPosition(position);
-                options.label.processMath(text, /* force */ true);
-            } else {
-                graphie.label(position, text, "center", options.style);
-            }
-        }
-
-        return temp;
-    },
-
-    labelSide: function (options) {
-        const graphie = this;
-
-        _.defaults(options, {
-            point1: [0, 0],
-            point2: [0, 0],
-            label: null,
-            text: "",
-            numTicks: 0,
-            numArrows: 0,
-            clockwise: false,
-            style: {},
-        });
-
-        let p1;
-        let p2;
-        if (options.clockwise) {
-            p1 = options.point1;
-            p2 = options.point2;
-        } else {
-            p1 = options.point2;
-            p2 = options.point1;
-        }
-
-        const midpoint = [(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2];
-        const sMidpoint = graphie.scalePoint(midpoint);
-        const parallelAngle = Math.atan2(p2[1] - p1[1], p2[0] - p1[0]);
-        const perpendicularAngle = parallelAngle + Math.PI / 2;
-        const temp = [];
-        let sCumulativeOffset = 0;
-
-        if (options.numTicks) {
-            const n = options.numTicks;
-
-            const sSpacing = 5;
-            const sHeight = 5;
-
-            const style = _.extend({}, options.style, {
-                strokeWidth: 2,
-            });
-
-            _.times(n, function (i) {
-                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),
-                    ),
-                ];
-
-                temp.push(graphie.scaledPath(sPath, style));
-            });
-
-            sCumulativeOffset += sSpacing * (n - 1) + 15;
-        }
-
-        if (options.numArrows) {
-            const n = options.numArrows;
-
-            const start = [p1, p2].sort(function (a, b) {
-                if (a[1] === b[1]) {
-                    return a[0] - b[0];
-                }
-                return a[1] - b[1];
-            })[0];
-            const sStart = graphie.scalePoint(start);
-
-            const style = _.extend({}, options.style, {
-                arrows: "->",
-                strokeWidth: 2,
-            });
-
-            const sSpacing = 5;
-
-            _.times(n, function (i) {
-                const sOffset = sCumulativeOffset + sSpacing * i;
-                let sOffsetVector = scaledPolarRad(sOffset, parallelAngle);
-
-                if (start !== p1) {
-                    sOffsetVector = reverseVector(sOffsetVector);
-                }
-
-                const sEnd = addPoints(sMidpoint, sOffsetVector);
-
-                temp.push(graphie.scaledPath([sStart, sEnd], style));
-            });
-        }
-
-        let text = options.text;
-        if (text) {
-            const match = text.match(/\$len(\d)?/);
-            if (match) {
-                const distance = GraphUtils.getDistance(p1, p2);
-                const precision = match[1] || 1;
-                text = text.replace(
-                    match[0],
-                    KhanMath.toFixedApprox(distance, precision),
-                );
-            }
-
-            const sOffset = 20;
-            const sOffsetVector = scaledPolarRad(sOffset, perpendicularAngle);
-            const sPosition = addPoints(sMidpoint, sOffsetVector);
-            const position = graphie.unscalePoint(sPosition);
-
-            // Reuse label if possible
-            if (options.label) {
-                options.label.setPosition(position);
-                options.label.processMath(text, /* force */ true);
-            } else {
-                graphie.label(position, text, "center", options.style);
-            }
-        }
-
-        return temp;
-    },
-
-    /* Can also be used to label points that aren't vertices */
-    labelVertex: function (options) {
-        const graphie = this;
-
-        _.defaults(options, {
-            point1: null,
-            vertex: [0, 0],
-            point3: null,
-            label: null,
-            text: "",
-            clockwise: false,
-            style: {},
-        });
-
-        if (!options.text) {
-            return;
-        }
-
-        const vertex = options.vertex;
-        const sVertex = graphie.scalePoint(vertex);
-        let p1;
-        let p3;
-        if (options.clockwise) {
-            p1 = options.point1;
-            p3 = options.point3;
-        } else {
-            p1 = options.point3;
-            p3 = options.point1;
-        }
-
-        let angle = 135;
-        let halfAngle;
-        if (p1 && p3) {
-            const startAngle = GraphUtils.findAngle(p1, vertex);
-            const endAngle = GraphUtils.findAngle(p3, vertex);
-            angle = (endAngle + 360 - startAngle) % 360;
-            halfAngle = (startAngle + angle / 2 + 180) % 360;
-        } else if (p1) {
-            const parallelAngle = GraphUtils.findAngle(vertex, p1);
-            halfAngle = parallelAngle + 90;
-        } else if (p3) {
-            const parallelAngle = GraphUtils.findAngle(p3, vertex);
-            halfAngle = parallelAngle + 90;
-        } else {
-            // Standalone point
-            halfAngle = 135;
-        }
-
-        const sRadius = 10 + scaledDistanceFromAngle(360 - angle);
-        const sOffsetVector = scaledPolarDeg(sRadius, halfAngle);
-        const sPosition = addPoints(sVertex, sOffsetVector);
-        const position = graphie.unscalePoint(sPosition);
-
-        // Reuse label if possible
-        if (options.label) {
-            options.label.setPosition(position);
-            options.label.processMath(options.text, /* force */ true);
-        } else {
-            graphie.label(position, options.text, "center", options.style);
-        }
-    },
-
-    // Add a point to the graph that can be dragged around.
-    // It allows automatic constraints on its movement as well as automatically
-    // managing line segments that terminate at the point.
-    //
-    // Options can be set to control how the point behaves:
-    //   coord[]:
-    //     The initial position of the point
-    //   snapX, snapY:
-    //     The minimum increment the point can be moved
-    //
-    // The return value is an object that can be used to manipulate the point:
-    //   The coordX and coordY properties tell you the current position
-    //
-    //   By adding an onMove() method to the returned object, you can install an
-    //   event handler that gets called every time the user moves the point.
-    //
-    //   The returned object also provides a moveTo(x,y) method that will move
-    //   the point to a specific coordinate
-    //
-    // Constraints can be set on the on the returned object:
-    //
-    //  - Set point to be immovable:
-    //        movablePoint.constraints.fixed = true
-    //
-    //  - Constrain point to a fixed distance from another point. The resulting
-    //    point will move in a circle:
-    //        movablePoint.fixedDistance = {
-    //           dist: 2,
-    //           point: point1
-    //        }
-    //
-    //  - Constrain point to a line defined by a fixed angle between it and
-    //    two other points:
-    //        movablePoint.fixedAngle = {
-    //           angle: 45,
-    //           vertex: point1,
-    //           ref: point2
-    //        }
-    //
-    //  - Confined the point to traveling in a vertical or horizontal line,
-    //    respectively
-    //        movablePoint.constrainX = true;
-    //        movablePoint.constrainY = true;
-    //
-    //  - Connect a movableLineSegment to a movablePoint. The point is attached
-    //    to a specific end of the line segment by adding the segment either to
-    //    the list of lines that start at the point or the list of lines that
-    //    end at the point (movableLineSegment can do this for you):
-    //        movablePoint.lineStarts.push(movableLineSegment);
-    //          - or -
-    //        movablePoint.lineEnds.push(movableLineSegment);
-    //
-    //  - Connect a movablePolygon to a movablePoint in exacty the same way:
-    //        movablePoint.polygonVertices.push(movablePolygon);
-    //
-    addMovablePoint: function (options) {
-        const movablePoint = $.extend(
-            true,
-            {
-                graph: this,
-                coord: [0, 0],
-                snapX: 0,
-                snapY: 0,
-                pointSize: 4,
-                highlight: false,
-                dragging: false,
-                visible: true,
-                bounded: true,
-                constraints: {
-                    fixed: false,
-                    constrainX: false,
-                    constrainY: false,
-                    fixedAngle: {},
-                    fixedDistance: {},
-                },
-                lineStarts: [],
-                lineEnds: [],
-                polygonVertices: [],
-                normalStyle: {},
-                highlightStyle: {
-                    fill: KhanColors.INTERACTING,
-                    stroke: KhanColors.INTERACTING,
-                },
-                labelStyle: {
-                    color: KhanColors.INTERACTIVE,
-                },
-                vertexLabel: "",
-                mouseTarget: null,
-            },
-            options,
-        );
-
-        const normalColor = movablePoint.constraints.fixed
-            ? KhanColors.DYNAMIC
-            : KhanColors.INTERACTIVE;
-        movablePoint.normalStyle = _.extend(
-            {},
-            {
-                fill: normalColor,
-                stroke: normalColor,
-            },
-            options.normalStyle,
-        );
-
-        // deprecated: don't use coordX/coordY; use coord[]
-        if (options.coordX !== undefined) {
-            movablePoint.coord[0] = options.coordX;
-        }
-        if (options.coordY !== undefined) {
-            movablePoint.coord[1] = options.coordY;
-        }
-
-        const graph = movablePoint.graph;
-
-        const applySnapAndConstraints = function (coord) {
-            // coord should be the scaled coordinate
-
-            // move point away from edge of graph unless it's invisible or fixed
-            if (
-                movablePoint.visible &&
-                movablePoint.bounded &&
-                !movablePoint.constraints.fixed
-            ) {
-                // can't go beyond 10 pixels from the edge
-                coord = graph.constrainToBounds(coord, 10);
-            }
-
-            let coordX = coord[0];
-            let coordY = coord[1];
-
-            // snap coordinates to grid
-            if (movablePoint.snapX !== 0) {
-                coordX =
-                    Math.round(coordX / movablePoint.snapX) *
-                    movablePoint.snapX;
-            }
-            if (movablePoint.snapY !== 0) {
-                coordY =
-                    Math.round(coordY / movablePoint.snapY) *
-                    movablePoint.snapY;
-            }
-
-            // snap to points around circle
-            if (movablePoint.constraints.fixedDistance.snapPoints) {
-                const mouse = graph.scalePoint(coord);
-                let mouseX = mouse[0];
-                let mouseY = mouse[1];
-
-                const snapRadians =
-                    (2 * Math.PI) /
-                    movablePoint.constraints.fixedDistance.snapPoints;
-                const radius = movablePoint.constraints.fixedDistance.dist;
-
-                const centerCoord =
-                    movablePoint.constraints.fixedDistance.point;
-                const centerX =
-                    (centerCoord[0] - graph.range[0][0]) * graph.scale[0];
-                const centerY =
-                    (-centerCoord[1] + graph.range[1][1]) * graph.scale[1];
-
-                let mouseXrel = mouseX - centerX;
-                let mouseYrel = -mouseY + centerY;
-                let radians = Math.atan(mouseYrel / mouseXrel);
-                const outsideArcTanRange = mouseXrel < 0;
-
-                // adjust so that angles increase from 0 to 2 pi as you go
-                // around the circle
-                if (outsideArcTanRange) {
-                    radians += Math.PI;
-                }
-
-                // perform the snap
-                radians = Math.round(radians / snapRadians) * snapRadians;
-
-                // convert from radians back to pixels
-                mouseXrel = radius * Math.cos(radians);
-                mouseYrel = radius * Math.sin(radians);
-                // convert back to coordinates relative to graphie canvas
-                mouseX = mouseXrel + centerX;
-                mouseY = -mouseYrel + centerY;
-                coordX = KhanMath.roundTo(
-                    5,
-                    mouseX / graph.scale[0] + graph.range[0][0],
-                );
-                coordY = KhanMath.roundTo(
-                    5,
-                    graph.range[1][1] - mouseY / graph.scale[1],
-                );
-            }
-
-            const result = movablePoint.applyConstraint([coordX, coordY]);
-            return result;
-        };
-
-        // Using the passed coordinates, apply any constraints and return
-        // the closest coordinates that match the constraints.
-        movablePoint.applyConstraint = function (
-            coord,
-            extraConstraints,
-            override,
-        ) {
-            let newCoord = coord.slice();
-            const constraints = {};
-            if (override) {
-                $.extend(
-                    constraints,
-                    {
-                        fixed: false,
-                        constrainX: false,
-                        constrainY: false,
-                        fixedAngle: {},
-                        fixedDistance: {},
-                    },
-                    extraConstraints,
-                );
-            } else {
-                $.extend(constraints, this.constraints, extraConstraints);
-            }
-
-            // constrain to vertical movement
-            if (constraints.constrainX) {
-                newCoord = [this.coord[0], coord[1]];
-
-                // constrain to horizontal movement
-            } else if (constraints.constrainY) {
-                newCoord = [coord[0], this.coord[1]];
-
-                // both distance and angle are constrained
-            } else if (
-                typeof constraints.fixedAngle.angle === "number" &&
-                typeof constraints.fixedDistance.dist === "number"
-            ) {
-                const vertex =
-                    constraints.fixedAngle.vertex.coord ||
-                    constraints.fixedAngle.vertex;
-                const ref =
-                    constraints.fixedAngle.ref.coord ||
-                    constraints.fixedAngle.ref;
-                const distPoint =
-                    constraints.fixedDistance.point.coord ||
-                    constraints.fixedDistance.point;
-
-                const constrainedAngle =
-                    ((constraints.fixedAngle.angle +
-                        GraphUtils.findAngle(ref, vertex)) *
-                        Math.PI) /
-                    180;
-                const length = constraints.fixedDistance.dist;
-                newCoord[0] =
-                    length * Math.cos(constrainedAngle) + distPoint[0];
-                newCoord[1] =
-                    length * Math.sin(constrainedAngle) + distPoint[1];
-
-                // angle is constrained
-            } else if (typeof constraints.fixedAngle.angle === "number") {
-                const vertex =
-                    constraints.fixedAngle.vertex.coord ||
-                    constraints.fixedAngle.vertex;
-                const ref =
-                    constraints.fixedAngle.ref.coord ||
-                    constraints.fixedAngle.ref;
-
-                const constrainedAngle =
-                    ((constraints.fixedAngle.angle +
-                        GraphUtils.findAngle(ref, vertex)) *
-                        Math.PI) /
-                    180;
-                const angle =
-                    (GraphUtils.findAngle(coord, vertex) * Math.PI) / 180;
-                const distance = GraphUtils.getDistance(coord, vertex);
-                let length = distance * Math.cos(constrainedAngle - angle);
-                length = length < 1.0 ? 1.0 : length;
-                newCoord[0] = length * Math.cos(constrainedAngle) + vertex[0];
-                newCoord[1] = length * Math.sin(constrainedAngle) + vertex[1];
-
-                // distance is constrained
-            } else if (typeof constraints.fixedDistance.dist === "number") {
-                const distPoint =
-                    constraints.fixedDistance.point.coord ||
-                    constraints.fixedDistance.point;
-
-                let angle = GraphUtils.findAngle(coord, distPoint);
-                const length = constraints.fixedDistance.dist;
-                angle = (angle * Math.PI) / 180;
-                newCoord[0] = length * Math.cos(angle) + distPoint[0];
-                newCoord[1] = length * Math.sin(angle) + distPoint[1];
-
-                // point is fixed
-            } else if (constraints.fixed) {
-                newCoord = movablePoint.coord;
-            }
-            return newCoord;
-        };
-
-        movablePoint.coord = applySnapAndConstraints(movablePoint.coord);
-
-        const highlightScale = 2;
-
-        if (movablePoint.visible) {
-            graph.style(movablePoint.normalStyle, function () {
-                const radii = [
-                    movablePoint.pointSize / graph.scale[0],
-                    movablePoint.pointSize / graph.scale[1],
-                ];
-                const options = {
-                    maxScale: highlightScale,
-                    // Add in 2px of padding to avoid clipping at the edges.
-                    padding: 2,
-                };
-                // $FlowFixMe[invalid-constructor]
-                movablePoint.visibleShape = new WrappedEllipse(
-                    graph,
-                    movablePoint.coord,
-                    radii,
-                    options,
-                );
-                movablePoint.visibleShape.attr(
-                    _.omit(movablePoint.normalStyle, "scale"),
-                );
-                movablePoint.visibleShape.toFront();
-            });
-        }
-        movablePoint.normalStyle.scale = 1;
-        movablePoint.highlightStyle.scale = highlightScale;
-
-        if (movablePoint.vertexLabel) {
-            movablePoint.labeledVertex = this.label(
-                [0, 0],
-                "",
-                "center",
-                movablePoint.labelStyle,
-            );
-        }
-
-        movablePoint.drawLabel = function () {
-            if (movablePoint.vertexLabel) {
-                movablePoint.graph.labelVertex({
-                    vertex: movablePoint.coord,
-                    label: movablePoint.labeledVertex,
-                    text: movablePoint.vertexLabel,
-                    style: movablePoint.labelStyle,
-                });
-            }
-        };
-
-        movablePoint.drawLabel();
-
-        movablePoint.grab = function (offset) {
-            // The offset for the gesture. When provided, the movable point will
-            // track the mouse's position, plus this offset. This is typically
-            // used to lock the distance between a user's finger and the movable
-            // point, when dragging.
-            offset = offset || [0, 0];
-
-            $(document).bind(
-                "vmousemove.point vmouseup.point",
-                function (event) {
-                    event.preventDefault();
-                    movablePoint.dragging = true;
-                    dragging = true;
-
-                    // Adjust the target coordinate by accounting for the gesture's
-                    // offset.
-                    let coord = kvector.add(graph.getMouseCoord(event), offset);
-
-                    coord = applySnapAndConstraints(coord);
-                    let coordX = coord[0];
-                    let coordY = coord[1];
-                    let mouseX;
-                    let mouseY;
-
-                    if (event.type === "vmousemove") {
-                        let doMove = true;
-                        // The caller has the option of adding an onMove() method
-                        // to the movablePoint object we return as a sort of event
-                        // handler. By returning false from onMove(), the move
-                        // can be vetoed, providing custom constraints on where
-                        // the point can be moved. By returning array [x, y], the
-                        // move can be overridden
-                        if (_.isFunction(movablePoint.onMove)) {
-                            const result = movablePoint.onMove(coordX, coordY);
-                            if (result === false) {
-                                doMove = false;
-                            }
-                            if (_.isArray(result)) {
-                                coordX = result[0];
-                                coordY = result[1];
-                            }
-                        }
-                        // coord{X|Y} may have been modified by constraints or
-                        // onMove handler; adjust mouse{X|Y} to match
-                        mouseX = (coordX - graph.range[0][0]) * graph.scale[0];
-                        mouseY = (-coordY + graph.range[1][1]) * graph.scale[1];
-
-                        if (doMove) {
-                            const point = graph.unscalePoint([mouseX, mouseY]);
-                            movablePoint.visibleShape.moveTo(point);
-                            movablePoint.mouseTarget.moveTo(point);
-                            movablePoint.coord = [coordX, coordY];
-                            movablePoint.updateLineEnds();
-                            $(movablePoint).trigger("move");
-                        }
-
-                        movablePoint.drawLabel();
-                    } else if (event.type === "vmouseup") {
-                        $(document).unbind(".point");
-                        movablePoint.dragging = false;
-                        dragging = false;
-                        if (_.isFunction(movablePoint.onMoveEnd)) {
-                            const result = movablePoint.onMoveEnd(
-                                coordX,
-                                coordY,
-                            );
-                            if (_.isArray(result)) {
-                                coordX = result[0];
-                                coordY = result[1];
-                                mouseX =
-                                    (coordX - graph.range[0][0]) *
-                                    graph.scale[0];
-                                mouseY =
-                                    (-coordY + graph.range[1][1]) *
-                                    graph.scale[1];
-                                const point = graph.unscalePoint([
-                                    mouseX,
-                                    mouseY,
-                                ]);
-                                movablePoint.visibleShape.moveTo(point);
-                                movablePoint.mouseTarget.moveTo(point);
-                                movablePoint.coord = [coordX, coordY];
-                            }
-                        }
-                        if (!movablePoint.highlight) {
-                            movablePoint.visibleShape.animate(
-                                movablePoint.normalStyle,
-                                50,
-                            );
-                            if (movablePoint.onUnhighlight) {
-                                movablePoint.onUnhighlight();
-                            }
-                        }
-                    }
-                },
-            );
-        };
-
-        if (movablePoint.visible && !movablePoint.constraints.fixed) {
-            // the invisible shape in front of the point that gets mouse events
-            if (!movablePoint.mouseTarget) {
-                const radii = graph.unscaleVector(16);
-                const options = {
-                    mouselayer: true,
-                    padding: 0,
-                    disableMouseEventsOnWrapper: true,
-                    interactiveKindForTesting: "movable-point",
-                };
-                // $FlowFixMe[invalid-constructor]
-                movablePoint.mouseTarget = new WrappedEllipse(
-                    graph,
-                    movablePoint.coord,
-                    radii,
-                    options,
-                );
-                movablePoint.mouseTarget.attr({fill: "#000", opacity: 0.0});
-            }
-
-            const $mouseTarget = $(movablePoint.mouseTarget.getMouseTarget());
-            $mouseTarget.css("cursor", "move");
-            $mouseTarget.bind(
-                "vmousedown vmouseover vmouseout",
-                function (event) {
-                    if (event.type === "vmouseover") {
-                        movablePoint.highlight = true;
-                        if (!dragging) {
-                            movablePoint.visibleShape.animate(
-                                movablePoint.highlightStyle,
-                                50,
-                            );
-                            if (movablePoint.onHighlight) {
-                                movablePoint.onHighlight();
-                            }
-                        }
-                    } else if (event.type === "vmouseout") {
-                        movablePoint.highlight = false;
-                        if (!movablePoint.dragging && !dragging) {
-                            movablePoint.visibleShape.animate(
-                                movablePoint.normalStyle,
-                                50,
-                            );
-                            if (movablePoint.onUnhighlight) {
-                                movablePoint.onUnhighlight();
-                            }
-                        }
-                    } else if (
-                        event.type === "vmousedown" &&
-                        (event.which === 1 || event.which === 0)
-                    ) {
-                        event.preventDefault();
-
-                        // The offset between the cursor or finger and the initial
-                        // coordinates of the point. This is tracked so as to avoid
-                        // locking the moving point to the user's finger on touch
-                        // devices, which would obscure it, no matter how large we
-                        // made the touch target. Instead, we respect the offset at
-                        // which the point was grabbed for the entirety of the
-                        // gesture, if it's a touch-based interaction.
-                        const startCoord = movablePoint.coord;
-                        const startMouseCoord = graph.getMouseCoord(event);
-                        const isMouse = !("ontouchstart" in window);
-                        const touchOffset = isMouse
-                            ? [0, 0]
-                            : kvector.subtract(startCoord, startMouseCoord);
-
-                        movablePoint.grab(touchOffset);
-                    }
-                },
-            );
-        }
-
-        // Method to let the caller animate the point to a new position.
-        // Useful as part of a hint to show the user the correct place
-        // to put the point.
-        movablePoint.moveTo = function (coordX, coordY, updateLines) {
-            const distance = GraphUtils.getDistance(
-                this.graph.scalePoint([coordX, coordY]),
-                this.graph.scalePoint(this.coord),
-            );
-
-            const time = distance * 5;
-
-            const cb =
-                updateLines &&
-                function (coord) {
-                    movablePoint.coord = coord;
-                    movablePoint.updateLineEnds();
-                };
-            this.visibleShape.animateTo([coordX, coordY], time, cb);
-            this.mouseTarget.animateTo([coordX, coordY], time, cb);
-            this.coord = [coordX, coordY];
-            if (_.isFunction(this.onMove)) {
-                this.onMove(coordX, coordY);
-            }
-        };
-
-        // After moving the point, call this to update all line segments
-        // terminating at the point
-        movablePoint.updateLineEnds = function () {
-            $(this.lineStarts).each(function () {
-                this.coordA = movablePoint.coord;
-                this.transform();
-            });
-            $(this.lineEnds).each(function () {
-                this.coordZ = movablePoint.coord;
-                this.transform();
-            });
-            $(this.polygonVertices).each(function () {
-                this.transform();
-            });
-        };
-
-        // Put the point at a new position without any checks, animation,
-        // or callbacks
-        movablePoint.setCoord = function (coord) {
-            if (this.visible) {
-                this.visibleShape.moveTo(coord);
-                if (this.mouseTarget != null) {
-                    this.mouseTarget.moveTo(coord);
-                }
-            }
-            this.coord = coord.slice();
-        };
-
-        // Put the point at the new position, checking that it is
-        // within the graph's bounds
-        movablePoint.setCoordConstrained = function (coord) {
-            this.setCoord(applySnapAndConstraints(coord));
-        };
-
-        // Change z-order to back
-        movablePoint.toBack = function () {
-            if (this.visible) {
-                if (this.mouseTarget != null) {
-                    this.mouseTarget.toBack();
-                }
-                this.visibleShape.toBack();
-            }
-        };
-
-        // Change z-order to front
-        movablePoint.toFront = function () {
-            if (this.visible) {
-                if (this.mouseTarget != null) {
-                    this.mouseTarget.toFront();
-                }
-                this.visibleShape.toFront();
-            }
-        };
-
-        movablePoint.remove = function () {
-            if (this.visibleShape) {
-                this.visibleShape.remove();
-            }
-            if (this.mouseTarget) {
-                this.mouseTarget.remove();
-            }
-            if (this.labeledVertex) {
-                this.labeledVertex.remove();
-            }
-        };
-
-        return movablePoint;
-    },
-
-    // MovableLineSegment is a line segment that can be dragged around the
-    // screen. By attaching a smartPoint to each (or one) end, the ends can be
-    // manipulated individually.
-    //
-    // To use with smartPoints, add the smartPoints first, then:
-    //   addMovableLineSegment({ pointA: smartPoint1, pointZ: smartPoint2 });
-    // Or just one end:
-    //   addMovableLineSegment({ pointA: smartPoint, coordZ: [0, 0] });
-    //
-    // Include "fixed: true" in the options if you don't want the entire line
-    // to be draggable (you can still use points to make the endpoints
-    // draggable)
-    //
-    // The returned object includes the following properties/methods:
-    //
-    //   - lineSegment.coordA / lineSegment.coordZ
-    //         The coordinates of each end of the line segment
-    //
-    //   - lineSegment.transform(syncToPoints)
-    //         Repositions the line segment. Call after changing coordA
-    //         and/or coordZ, or pass syncToPoints = true to use the current
-    //         position of the corresponding smartPoints, if the segment was
-    //         defined using smartPoints
-    //
-    addMovableLineSegment: function (options: $FlowFixMe) {
-        const lineSegment = $.extend(
-            {
-                graph: this,
-                coordA: [0, 0],
-                coordZ: [1, 1],
-                snapX: 0,
-                snapY: 0,
-                fixed: false,
-                ticks: 0,
-                normalStyle: {},
-                highlightStyle: {
-                    stroke: KhanColors.INTERACTING,
-                    "stroke-width": 6,
-                },
-                labelStyle: {
-                    stroke: KhanColors.INTERACTIVE,
-                    color: KhanColors.INTERACTIVE,
-                },
-                highlight: false,
-                dragging: false,
-                tick: [],
-                extendLine: false,
-                extendRay: false,
-                constraints: {
-                    fixed: false,
-                    constrainX: false,
-                    constrainY: false,
-                },
-                sideLabel: "",
-                vertexLabels: [],
-                numArrows: 0,
-                numTicks: 0,
-                movePointsWithLine: false,
-            },
-            options,
-        );
-
-        const normalColor = lineSegment.fixed
-            ? KhanColors.DYNAMIC
-            : KhanColors.INTERACTIVE;
-        lineSegment.normalStyle = _.extend(
-            {},
-            {
-                "stroke-width": 2,
-                stroke: normalColor,
-            },
-            options.normalStyle,
-        );
-        // arrowStyle should be kept in sync with styling of the line
-        lineSegment.arrowStyle = _.extend({}, lineSegment.normalStyle, {
-            color: lineSegment.normalStyle.stroke,
-        });
-
-        // If the line segment is defined by movablePoints, coordA/coordZ are
-        // owned by the points, otherwise they're owned by us
-        if (options.pointA !== undefined) {
-            lineSegment.coordA = options.pointA.coord;
-            lineSegment.pointA.lineStarts.push(lineSegment);
-        } else if (options.coordA !== undefined) {
-            lineSegment.coordA = options.coordA.slice();
-        }
-
-        if (options.pointZ !== undefined) {
-            lineSegment.coordZ = options.pointZ.coord;
-            lineSegment.pointZ.lineEnds.push(lineSegment);
-        } else if (options.coordA !== undefined) {
-            lineSegment.coordA = lineSegment.coordA.slice();
-        }
-
-        const graph = lineSegment.graph;
-
-        graph.style(lineSegment.normalStyle);
-        for (let i = 0; i < lineSegment.ticks; ++i) {
-            lineSegment.tick[i] = InteractiveUtils.bogusShape;
-        }
-        let path = GraphUtils.unscaledSvgPath([
-            [0, 0],
-            [1, 0],
-        ]);
-        for (let i = 0; i < lineSegment.ticks; ++i) {
-            const tickoffset =
-                0.5 - (lineSegment.ticks - 1 + i * 2) / graph.scale[0];
-            // TODO(kevinb) figure out why path isn't being used
-            // eslint-disable-next-line no-unused-vars
-            path += GraphUtils.unscaledSvgPath([
-                [tickoffset, -7],
-                [tickoffset, 7],
-            ]);
-        }
-
-        options = {
-            thickness: Math.max(
-                lineSegment.normalStyle["stroke-width"],
-                lineSegment.highlightStyle["stroke-width"],
-            ),
-        };
-        // $FlowFixMe[invalid-constructor]
-        lineSegment.visibleLine = new WrappedLine(
-            graph,
-            [0, 0],
-            [1, 0],
-            options,
-        );
-        lineSegment.visibleLine.attr(lineSegment.normalStyle);
-
-        // Add mouse target
-        if (!lineSegment.fixed) {
-            const options = {
-                thickness: 30,
-                mouselayer: true,
-                interactiveKindForTesting: "movable-line",
-            };
-            // $FlowFixMe[invalid-constructor]
-            lineSegment.mouseTarget = new WrappedLine(
-                graph,
-                [0, 0],
-                [1, 0],
-                options,
-            );
-            lineSegment.mouseTarget.attr({fill: "#000", opacity: 0.0});
-        }
-
-        // Reposition the line segment. Call after changing coordA and/or
-        // coordZ, or pass syncToPoints = true to use the current position of
-        // the corresponding movablePoints, if the segment was defined using
-        // movablePoints
-        lineSegment.transform = function (syncToPoints) {
-            if (syncToPoints) {
-                if (typeof this.pointA === "object") {
-                    this.coordA = this.pointA.coord;
-                }
-                if (typeof this.pointZ === "object") {
-                    this.coordZ = this.pointZ.coord;
-                }
-            }
-
-            const getScaledAngle = function (line) {
-                const scaledA = line.graph.scalePoint(line.coordA);
-                const scaledZ = line.graph.scalePoint(line.coordZ);
-                return kvector.polarDegFromCart(
-                    kvector.subtract(scaledZ, scaledA),
-                )[1];
-            };
-
-            const getClipPoint = function (graph, coord, angle) {
-                graph = lineSegment.graph;
-                const xExtent = graph.range[0][1] - graph.range[0][0];
-                const yExtent = graph.range[1][1] - graph.range[1][0];
-
-                const distance = xExtent + yExtent;
-                const angleVec = graph.unscaleVector(
-                    kvector.cartFromPolarDeg(1, angle),
-                );
-                const distVec = kvector.scale(
-                    kvector.normalize(angleVec),
-                    distance,
-                );
-                const farCoord = kvector.add(coord, distVec);
-                const scaledAngle = kvector.polarDegFromCart(angleVec)[1];
-                const clipPoint = graph.constrainToBoundsOnAngle(
-                    farCoord,
-                    4,
-                    (scaledAngle * Math.PI) / 180,
-                );
-                return clipPoint;
-            };
-
-            const angle = getScaledAngle(this);
-            let start = this.coordA;
-            let end = this.coordZ;
-
-            // Extend start, end if necessary (i.e., if not a line segment)
-            if (this.extendLine) {
-                start = getClipPoint(graph, start, 360 - angle);
-                end = getClipPoint(graph, end, (540 - angle) % 360);
-            } else if (this.extendRay) {
-                end = getClipPoint(graph, start, 360 - angle);
-            }
-
-            const elements = [this.visibleLine];
-            if (!this.fixed) {
-                elements.push(this.mouseTarget);
-            }
-            _.each(elements, function (element) {
-                element.moveTo(start, end);
-            });
-
-            const createArrow = function (graph, style) {
-                const center = [0.75, 0];
-                let points = [
-                    [-3, 4],
-                    [-2.75, 2.5],
-                    [0, 0.25],
-                    center,
-                    [0, -0.25],
-                    [-2.75, -2.5],
-                    [-3, -4],
-                ];
-
-                const scale = 1.4;
-                points = _.map(points, function (point) {
-                    const pv = kvector.subtract(point, center);
-                    const pvScaled = kvector.scale(pv, scale);
-                    return kvector.add(center, pvScaled);
-                });
-
-                const createCubicPath = function (points) {
-                    let path = "M" + points[0][0] + " " + points[0][1];
-                    for (let i = 1; i < points.length; i += 3) {
-                        path +=
-                            "C" +
-                            points[i][0] +
-                            " " +
-                            points[i][1] +
-                            " " +
-                            points[i + 1][0] +
-                            " " +
-                            points[i + 1][1] +
-                            " " +
-                            points[i + 2][0] +
-                            " " +
-                            points[i + 2][1];
-                    }
-                    return path;
-                };
-
-                const unscaledPoints = _.map(points, graph.unscalePoint);
-                const options = {
-                    center: graph.unscalePoint(center),
-                    createPath: createCubicPath,
-                };
-                // $FlowFixMe[invalid-constructor]
-                const arrowHead = new WrappedPath(
-                    graph,
-                    unscaledPoints,
-                    options,
-                );
-                arrowHead.attr(
-                    _.extend(
-                        {
-                            "stroke-linejoin": "round",
-                            "stroke-linecap": "round",
-                            "stroke-dasharray": "",
-                        },
-                        style,
-                    ),
-                );
-
-                // Add custom function for transforming arrowheads that
-                // accounts for center, scaling, etc.
-                // $FlowFixMe[prop-missing]
-                arrowHead.toCoordAtAngle = function (
-                    coord: Coord,
-                    angle: number,
-                ): void {
-                    const clipPoint = graph.scalePoint(
-                        getClipPoint(graph, coord, angle),
-                    );
-                    const do3dTransform = getCanUse3dTransform();
-                    arrowHead.transform(
-                        "translateX(" +
-                            (clipPoint[0] + scale * center[0]) +
-                            "px) " +
-                            "translateY(" +
-                            (clipPoint[1] + scale * center[1]) +
-                            "px) " +
-                            (do3dTransform ? "translateZ(0) " : "") +
-                            "rotate(" +
-                            (360 - KhanMath.bound(angle)) +
-                            "deg)",
-                    );
-                };
-
-                return arrowHead;
-            };
-
-            // Add arrows
-            if (this._arrows == null) {
-                this._arrows = [];
-
-                if (this.extendLine) {
-                    this._arrows.push(createArrow(graph, this.normalStyle));
-                    this._arrows.push(createArrow(graph, this.normalStyle));
-                } else if (this.extendRay) {
-                    this._arrows.push(createArrow(graph, this.normalStyle));
-                }
-            }
-
-            const coordForArrow = [this.coordA, this.coordZ];
-            const angleForArrow = [360 - angle, (540 - angle) % 360];
-            _.each(this._arrows, function (arrow, i) {
-                arrow.toCoordAtAngle(coordForArrow[i], angleForArrow[i]);
-            });
-
-            // Temporary objects: array of SVG nodes that get recreated on drag
-            _.invoke(this.temp, "remove");
-            this.temp = [];
-
-            const isClockwise =
-                this.coordA[0] < this.coordZ[0] ||
-                (this.coordA[0] === this.coordZ[0] &&
-                    this.coordA[1] > this.coordZ[1]);
-
-            // Update side label
-            if (this.sideLabel) {
-                this.temp.push(
-                    this.graph.labelSide({
-                        point1: this.coordA,
-                        point2: this.coordZ,
-                        label: this.labeledSide,
-                        text: this.sideLabel,
-                        numArrows: this.numArrows,
-                        numTicks: this.numTicks,
-                        clockwise: isClockwise,
-                        style: this.labelStyle,
-                    }),
-                );
-            }
-
-            // Update vertex labels
-            if (this.vertexLabels.length) {
-                this.graph.labelVertex({
-                    vertex: this.coordA,
-                    point3: this.coordZ,
-                    label: this.labeledVertices[0],
-                    text: this.vertexLabels[0],
-                    clockwise: isClockwise,
-                    style: this.labelStyle,
-                });
-
-                this.graph.labelVertex({
-                    point1: this.coordA,
-                    vertex: this.coordZ,
-                    label: this.labeledVertices[1],
-                    text: this.vertexLabels[1],
-                    clockwise: isClockwise,
-                    style: this.labelStyle,
-                });
-            }
-
-            this.temp = _.flatten(this.temp);
-        };
-
-        // Change z-order to back;
-        lineSegment.toBack = function () {
-            if (!lineSegment.fixed) {
-                lineSegment.mouseTarget.toBack();
-            }
-            lineSegment.visibleLine.toBack();
-        };
-
-        // Change z-order to front
-        lineSegment.toFront = function () {
-            if (!lineSegment.fixed) {
-                lineSegment.mouseTarget.toFront();
-            }
-            lineSegment.visibleLine.toFront();
-        };
-
-        lineSegment.remove = function () {
-            if (!lineSegment.fixed) {
-                lineSegment.mouseTarget.remove();
-            }
-            lineSegment.visibleLine.remove();
-            if (lineSegment.labeledSide) {
-                lineSegment.labeledSide.remove();
-            }
-            if (lineSegment.labeledVertices) {
-                _.invoke(lineSegment.labeledVertices, "remove");
-            }
-            if (lineSegment._arrows) {
-                _.invoke(lineSegment._arrows, "remove");
-            }
-            if (lineSegment.temp.length) {
-                _.invoke(lineSegment.temp, "remove");
-            }
-        };
-
-        lineSegment.hide = function () {
-            lineSegment.visibleLine.hide();
-            if (lineSegment.temp.length) {
-                _.invoke(lineSegment.temp, "hide");
-            }
-            if (lineSegment._arrows) {
-                _.invoke(lineSegment._arrows, "hide");
-            }
-        };
-
-        lineSegment.show = function () {
-            lineSegment.visibleLine.show();
-            if (lineSegment.temp.length) {
-                _.invoke(lineSegment.temp, "show");
-            }
-            if (lineSegment._arrows) {
-                _.invoke(lineSegment._arrows, "show");
-            }
-        };
-
-        if (lineSegment.sideLabel) {
-            lineSegment.labeledSide = this.label(
-                [0, 0],
-                "",
-                "center",
-                lineSegment.labelStyle,
-            );
-        }
-
-        if (lineSegment.vertexLabels.length) {
-            lineSegment.labeledVertices = _.map(
-                lineSegment.vertexLabels,
-                function (label) {
-                    return this.label(
-                        [0, 0],
-                        "",
-                        "center",
-                        lineSegment.labelStyle,
-                    );
-                },
-                this,
-            );
-        }
-
-        if (!lineSegment.fixed && !lineSegment.constraints.fixed) {
-            const $mouseTarget = $(lineSegment.mouseTarget.getMouseTarget());
-            $mouseTarget.css("cursor", "move");
-            $mouseTarget.bind(
-                "vmousedown vmouseover vmouseout",
-                function (event) {
-                    if (event.type === "vmouseover") {
-                        if (!dragging) {
-                            lineSegment.highlight = true;
-                            lineSegment.visibleLine.animate(
-                                lineSegment.highlightStyle,
-                                50,
-                            );
-                            lineSegment.arrowStyle = _.extend(
-                                {},
-                                lineSegment.arrowStyle,
-                                {
-                                    color: lineSegment.highlightStyle.stroke,
-                                    stroke: lineSegment.highlightStyle.stroke,
-                                },
-                            );
-                            lineSegment.transform();
-                        }
-                    } else if (event.type === "vmouseout") {
-                        lineSegment.highlight = false;
-                        if (!lineSegment.dragging) {
-                            lineSegment.visibleLine.animate(
-                                lineSegment.normalStyle,
-                                50,
-                            );
-                            lineSegment.arrowStyle = _.extend(
-                                {},
-                                lineSegment.arrowStyle,
-                                {
-                                    color: lineSegment.normalStyle.stroke,
-                                    stroke: lineSegment.normalStyle.stroke,
-                                },
-                            );
-                            lineSegment.transform();
-                        }
-                    } else if (
-                        event.type === "vmousedown" &&
-                        (event.which === 1 || event.which === 0)
-                    ) {
-                        event.preventDefault();
-                        let coordX =
-                            (event.pageX -
-                                $(graph.raphael.canvas.parentNode).offset()
-                                    .left) /
-                                graph.scale[0] +
-                            graph.range[0][0];
-                        let coordY =
-                            graph.range[1][1] -
-                            (event.pageY -
-                                $(graph.raphael.canvas.parentNode).offset()
-                                    .top) /
-                                graph.scale[1];
-                        if (lineSegment.snapX > 0) {
-                            coordX =
-                                Math.round(coordX / lineSegment.snapX) *
-                                lineSegment.snapX;
-                        }
-                        if (lineSegment.snapY > 0) {
-                            coordY =
-                                Math.round(coordY / lineSegment.snapY) *
-                                lineSegment.snapY;
-                        }
-                        const mouseOffsetA = [
-                            lineSegment.coordA[0] - coordX,
-                            lineSegment.coordA[1] - coordY,
-                        ];
-                        const mouseOffsetZ = [
-                            lineSegment.coordZ[0] - coordX,
-                            lineSegment.coordZ[1] - coordY,
-                        ];
-
-                        const offsetLeft = -Math.min(
-                            graph.scaleVector(mouseOffsetA)[0],
-                            graph.scaleVector(mouseOffsetZ)[0],
-                        );
-                        const offsetRight = Math.max(
-                            graph.scaleVector(mouseOffsetA)[0],
-                            graph.scaleVector(mouseOffsetZ)[0],
-                        );
-                        const offsetTop = Math.max(
-                            graph.scaleVector(mouseOffsetA)[1],
-                            graph.scaleVector(mouseOffsetZ)[1],
-                        );
-                        const offsetBottom = -Math.min(
-                            graph.scaleVector(mouseOffsetA)[1],
-                            graph.scaleVector(mouseOffsetZ)[1],
-                        );
-
-                        $(document).bind(
-                            "vmousemove.lineSegment vmouseup.lineSegment",
-                            function (event) {
-                                event.preventDefault();
-                                lineSegment.dragging = true;
-                                dragging = true;
-
-                                let mouseX =
-                                    event.pageX -
-                                    $(graph.raphael.canvas.parentNode).offset()
-                                        .left;
-                                let mouseY =
-                                    event.pageY -
-                                    $(graph.raphael.canvas.parentNode).offset()
-                                        .top;
-                                // no part of the line segment can go beyond 10
-                                // pixels from the edge
-                                mouseX = Math.max(
-                                    offsetLeft + 10,
-                                    Math.min(
-                                        graph.xpixels - 10 - offsetRight,
-                                        mouseX,
-                                    ),
-                                );
-                                mouseY = Math.max(
-                                    offsetTop + 10,
-                                    Math.min(
-                                        graph.ypixels - 10 - offsetBottom,
-                                        mouseY,
-                                    ),
-                                );
-
-                                let coordX =
-                                    mouseX / graph.scale[0] + graph.range[0][0];
-                                let coordY =
-                                    graph.range[1][1] - mouseY / graph.scale[1];
-                                if (lineSegment.snapX > 0) {
-                                    coordX =
-                                        Math.round(coordX / lineSegment.snapX) *
-                                        lineSegment.snapX;
-                                }
-                                if (lineSegment.snapY > 0) {
-                                    coordY =
-                                        Math.round(coordY / lineSegment.snapY) *
-                                        lineSegment.snapY;
-                                }
-
-                                if (event.type === "vmousemove") {
-                                    if (lineSegment.constraints.constrainX) {
-                                        coordX =
-                                            lineSegment.coordA[0] -
-                                            mouseOffsetA[0];
-                                    }
-                                    if (lineSegment.constraints.constrainY) {
-                                        coordY =
-                                            lineSegment.coordA[1] -
-                                            mouseOffsetA[1];
-                                    }
-                                    const dX =
-                                        coordX +
-                                        mouseOffsetA[0] -
-                                        lineSegment.coordA[0];
-                                    const dY =
-                                        coordY +
-                                        mouseOffsetA[1] -
-                                        lineSegment.coordA[1];
-                                    lineSegment.coordA = [
-                                        coordX + mouseOffsetA[0],
-                                        coordY + mouseOffsetA[1],
-                                    ];
-                                    lineSegment.coordZ = [
-                                        coordX + mouseOffsetZ[0],
-                                        coordY + mouseOffsetZ[1],
-                                    ];
-                                    lineSegment.transform();
-
-                                    if (lineSegment.movePointsWithLine) {
-                                        // If the points are movablePoints, adjust
-                                        // their coordinates when the line itself is
-                                        // dragged
-                                        if (
-                                            typeof lineSegment.pointA ===
-                                            "object"
-                                        ) {
-                                            lineSegment.pointA.setCoord([
-                                                lineSegment.pointA.coord[0] +
-                                                    dX,
-                                                lineSegment.pointA.coord[1] +
-                                                    dY,
-                                            ]);
-                                        }
-                                        if (
-                                            typeof lineSegment.pointZ ===
-                                            "object"
-                                        ) {
-                                            lineSegment.pointZ.setCoord([
-                                                lineSegment.pointZ.coord[0] +
-                                                    dX,
-                                                lineSegment.pointZ.coord[1] +
-                                                    dY,
-                                            ]);
-                                        }
-                                    }
-
-                                    if (_.isFunction(lineSegment.onMove)) {
-                                        lineSegment.onMove(dX, dY);
-                                    }
-                                } else if (event.type === "vmouseup") {
-                                    $(document).unbind(".lineSegment");
-                                    lineSegment.dragging = false;
-                                    dragging = false;
-                                    if (!lineSegment.highlight) {
-                                        lineSegment.visibleLine.animate(
-                                            lineSegment.normalStyle,
-                                            50,
-                                        );
-                                        lineSegment.arrowStyle = _.extend(
-                                            {},
-                                            lineSegment.arrowStyle,
-                                            {
-                                                color: lineSegment.normalStyle
-                                                    .stroke,
-                                                stroke: lineSegment.normalStyle
-                                                    .stroke,
-                                            },
-                                        );
-                                        lineSegment.transform();
-                                    }
-                                    if (_.isFunction(lineSegment.onMoveEnd)) {
-                                        lineSegment.onMoveEnd();
-                                    }
-                                }
-
-                                $(lineSegment).trigger("move");
-                            },
-                        );
-                    }
-                },
-            );
-        }
-
-        if (lineSegment.pointA !== undefined) {
-            lineSegment.pointA.toFront();
-        }
-        if (lineSegment.pointZ !== undefined) {
-            lineSegment.pointZ.toFront();
-        }
-        lineSegment.transform();
-        return lineSegment;
-    },
-
-    // MovablePolygon is a polygon that can be dragged around the screen.
-    // By attaching a smartPoint to each vertex, the points can be
-    // manipulated individually.
-    //
-    // To use with smartPoints, add the smartPoints first, then:
-    //   addMovablePolygon({points: [...]});
-    //
-    // Include "fixed: true" in the options if you don't want the entire
-    // polygon to be draggable (you can still use points to make the
-    // vertices draggable)
-    //
-    // The returned object includes the following properties/methods:
-    //
-    //   - polygon.points
-    //         The polygon's dynamic smartPoints and static coordinates, mixed.
-    //
-    //   - polygon.coords
-    //         The polygon's current coordinates (generated, don't edit).
-    //
-    //   - polygon.transform()
-    //         Repositions the polygon. Call after changing any points.
-    //
-    addMovablePolygon: function (options) {
-        const graphie = this;
-
-        const polygon = $.extend(
-            {
-                snapX: 0,
-                snapY: 0,
-                fixed: false,
-                constrainToGraph: true,
-                normalStyle: {},
-                highlightStyle: {
-                    stroke: KhanColors.INTERACTING,
-                    "stroke-width": 2,
-                    fill: KhanColors.INTERACTING,
-                    "fill-opacity": 0.05,
-                },
-                pointHighlightStyle: {
-                    fill: KhanColors.INTERACTING,
-                    stroke: KhanColors.INTERACTING,
-                },
-                labelStyle: {
-                    stroke: KhanColors.DYNAMIC,
-                    "stroke-width": 1,
-                    color: KhanColors.DYNAMIC,
-                },
-                angleLabels: [],
-                showRightAngleMarkers: [],
-                sideLabels: [],
-                vertexLabels: [],
-                numArcs: [],
-                numArrows: [],
-                numTicks: [],
-                updateOnPointMove: true,
-                closed: true,
-            },
-            _.omit(options, "points"),
-        );
-
-        const normalColor = polygon.fixed
-            ? KhanColors.DYNAMIC
-            : KhanColors.INTERACTIVE;
-        polygon.normalStyle = _.extend(
-            {
-                "stroke-width": 2,
-                "fill-opacity": 0,
-                fill: normalColor,
-                stroke: normalColor,
-            },
-            options.normalStyle,
-        );
-
-        // don't deep copy the points array with $.extend;
-        // we may want to append to it later for click-to-add-points
-        polygon.points = options.points;
-
-        const isPoint = function (coordOrPoint) {
-            return !_.isArray(coordOrPoint);
-        };
-
-        polygon.update = function () {
-            const n = polygon.points.length;
-
-            // Update coords
-            polygon.coords = _.map(polygon.points, function (coordOrPoint, i) {
-                if (isPoint(coordOrPoint)) {
-                    return coordOrPoint.coord;
-                }
-                return coordOrPoint;
-            });
-
-            // Calculate bounding box
-            polygon.left = _.min(_.pluck(polygon.coords, 0));
-            polygon.right = _.max(_.pluck(polygon.coords, 0));
-            polygon.top = _.max(_.pluck(polygon.coords, 1));
-            polygon.bottom = _.min(_.pluck(polygon.coords, 1));
-
-            let scaledCoords = _.map(polygon.coords, function (coord) {
-                return graphie.scalePoint(coord);
-            });
-
-            // Create path
-            if (polygon.closed) {
-                scaledCoords.push(true);
-            } else {
-                // For open polygons, concatenate a reverse of the path,
-                // to remove the inside area of the path, which would
-                // otherwise be clickable (even if the closing line segment
-                // wasn't drawn
-                scaledCoords = scaledCoords.concat(
-                    _.clone(scaledCoords).reverse(),
-                );
-            }
-            polygon.path = GraphUtils.unscaledSvgPath(scaledCoords);
-
-            // Temporary objects
-            _.invoke(polygon.temp, "remove");
-            polygon.temp = [];
-
-            const isClockwise = clockwise(polygon.coords);
-
-            // Update angle labels
-            if (
-                polygon.angleLabels.length ||
-                polygon.showRightAngleMarkers.length
-            ) {
-                _.each(polygon.labeledAngles, function (label, i) {
-                    polygon.temp.push(
-                        graphie.labelAngle({
-                            point1: polygon.coords[(i - 1 + n) % n],
-                            vertex: polygon.coords[i],
-                            point3: polygon.coords[(i + 1) % n],
-                            label: label,
-                            text: polygon.angleLabels[i],
-                            showRightAngleMarker:
-                                polygon.showRightAngleMarkers[i],
-                            numArcs: polygon.numArcs[i],
-                            clockwise: isClockwise,
-                            style: polygon.labelStyle,
-                        }),
-                    );
-                });
-            }
-
-            // Update side labels
-            if (polygon.sideLabels.length) {
-                _.each(polygon.labeledSides, function (label, i) {
-                    polygon.temp.push(
-                        graphie.labelSide({
-                            point1: polygon.coords[i],
-                            point2: polygon.coords[(i + 1) % n],
-                            label: label,
-                            text: polygon.sideLabels[i],
-                            numArrows: polygon.numArrows[i],
-                            numTicks: polygon.numTicks[i],
-                            clockwise: isClockwise,
-                            style: polygon.labelStyle,
-                        }),
-                    );
-                });
-            }
-
-            // Update vertex labels
-            if (polygon.vertexLabels.length) {
-                _.each(polygon.labeledVertices, function (label, i) {
-                    graphie.labelVertex({
-                        point1: polygon.coords[(i - 1 + n) % n],
-                        vertex: polygon.coords[i],
-                        point3: polygon.coords[(i + 1) % n],
-                        label: label,
-                        text: polygon.vertexLabels[i],
-                        clockwise: isClockwise,
-                        style: polygon.labelStyle,
-                    });
-                });
-            }
-
-            polygon.temp = _.flatten(polygon.temp);
-        };
-
-        polygon.transform = function () {
-            polygon.update();
-
-            polygon.visibleShape.attr({path: polygon.path});
-
-            if (!polygon.fixed) {
-                polygon.mouseTarget.attr({path: polygon.path});
-            }
-        };
-
-        polygon.remove = function () {
-            polygon.visibleShape.remove();
-
-            if (!polygon.fixed) {
-                polygon.mouseTarget.remove();
-            }
-
-            if (polygon.labeledAngles) {
-                _.invoke(polygon.labeledAngles, "remove");
-            }
-
-            if (polygon.labeledSides) {
-                _.invoke(polygon.labeledSides, "remove");
-            }
-
-            if (polygon.labeledVertices) {
-                _.invoke(polygon.labeledVertices, "remove");
-            }
-
-            if (polygon.temp.length) {
-                _.invoke(polygon.temp, "remove");
-            }
-        };
-
-        polygon.toBack = function () {
-            if (!polygon.fixed) {
-                polygon.mouseTarget.toBack();
-            }
-
-            polygon.visibleShape.toBack();
-        };
-
-        polygon.toFront = function () {
-            if (!polygon.fixed) {
-                polygon.mouseTarget.toFront();
-            }
-
-            polygon.visibleShape.toFront();
-        };
-
-        // Setup
-
-        if (polygon.updateOnPointMove) {
-            _.each(_.filter(polygon.points, isPoint), function (coordOrPoint) {
-                coordOrPoint.polygonVertices.push(polygon);
-            });
-        }
-
-        polygon.coords = new Array(polygon.points.length);
-
-        if (polygon.angleLabels.length) {
-            const numLabels = Math.max(
-                polygon.angleLabels.length,
-                polygon.showRightAngleMarkers.length,
-            );
-            polygon.labeledAngles = _.times(
-                numLabels,
-                function () {
-                    return this.label([0, 0], "", "center", polygon.labelStyle);
-                },
-                this,
-            );
-        }
-
-        if (polygon.sideLabels.length) {
-            polygon.labeledSides = _.map(
-                polygon.sideLabels,
-                function (label) {
-                    return this.label([0, 0], "", "center", polygon.labelStyle);
-                },
-                this,
-            );
-        }
-
-        if (polygon.vertexLabels.length) {
-            polygon.labeledVertices = _.map(
-                polygon.vertexLabels,
-                function (label) {
-                    return this.label([0, 0], "", "center", polygon.labelStyle);
-                },
-                this,
-            );
-        }
-
-        polygon.update();
-
-        polygon.visibleShape = graphie.raphael.path(polygon.path);
-        polygon.visibleShape.attr(polygon.normalStyle);
-
-        if (!polygon.fixed) {
-            polygon.mouseTarget = graphie.mouselayer.path(polygon.path);
-            polygon.mouseTarget.attr({
-                fill: "#000",
-                opacity: 0,
-                cursor: "move",
-            });
-
-            $(polygon.mouseTarget[0]).bind(
-                "vmousedown vmouseover vmouseout",
-                function (event) {
-                    if (event.type === "vmouseover") {
-                        if (!dragging || polygon.dragging) {
-                            polygon.highlight = true;
-                            polygon.visibleShape.animate(
-                                polygon.highlightStyle,
-                                50,
-                            );
-                            _.each(
-                                _.filter(polygon.points, isPoint),
-                                function (point) {
-                                    point.visibleShape.animate(
-                                        polygon.pointHighlightStyle,
-                                        50,
-                                    );
-                                },
-                            );
-                        }
-                    } else if (event.type === "vmouseout") {
-                        polygon.highlight = false;
-                        if (!polygon.dragging) {
-                            polygon.visibleShape.animate(
-                                polygon.normalStyle,
-                                50,
-                            );
-                            const points = _.filter(polygon.points, isPoint);
-                            if (!_.any(_.pluck(points, "dragging"))) {
-                                _.each(points, function (point) {
-                                    point.visibleShape.animate(
-                                        point.normalStyle,
-                                        50,
-                                    );
-                                });
-                            }
-                        }
-                    } else if (
-                        event.type === "vmousedown" &&
-                        (event.which === 1 || event.which === 0)
-                    ) {
-                        event.preventDefault();
-
-                        _.each(
-                            _.filter(polygon.points, isPoint),
-                            function (point) {
-                                point.dragging = true;
-                            },
-                        );
-
-                        let startX =
-                            (event.pageX -
-                                $(graphie.raphael.canvas.parentNode).offset()
-                                    .left) /
-                                graphie.scale[0] +
-                            graphie.range[0][0];
-                        let startY =
-                            graphie.range[1][1] -
-                            (event.pageY -
-                                $(graphie.raphael.canvas.parentNode).offset()
-                                    .top) /
-                                graphie.scale[1];
-                        if (polygon.snapX > 0) {
-                            startX =
-                                Math.round(startX / polygon.snapX) *
-                                polygon.snapX;
-                        }
-                        if (polygon.snapY > 0) {
-                            startY =
-                                Math.round(startY / polygon.snapY) *
-                                polygon.snapY;
-                        }
-                        let lastX = startX;
-                        let lastY = startY;
-
-                        const polygonCoords = polygon.coords.slice();
-
-                        const offsetLeft =
-                            (startX - polygon.left) * graphie.scale[0];
-                        const offsetRight =
-                            (polygon.right - startX) * graphie.scale[0];
-                        const offsetTop =
-                            (polygon.top - startY) * graphie.scale[1];
-                        const offsetBottom =
-                            (startY - polygon.bottom) * graphie.scale[1];
-
-                        $(document).bind(
-                            "vmousemove.polygon vmouseup.polygon",
-                            function (event) {
-                                event.preventDefault();
-
-                                polygon.dragging = true;
-                                dragging = true;
-
-                                let mouseX =
-                                    event.pageX -
-                                    $(
-                                        graphie.raphael.canvas.parentNode,
-                                    ).offset().left;
-                                let mouseY =
-                                    event.pageY -
-                                    $(
-                                        graphie.raphael.canvas.parentNode,
-                                    ).offset().top;
-
-                                // no part of the polygon can go beyond 10 pixels from
-                                // the edge
-                                if (polygon.constrainToGraph) {
-                                    mouseX = Math.max(
-                                        offsetLeft + 10,
-                                        Math.min(
-                                            graphie.xpixels - 10 - offsetRight,
-                                            mouseX,
-                                        ),
-                                    );
-                                    mouseY = Math.max(
-                                        offsetTop + 10,
-                                        Math.min(
-                                            graphie.ypixels - 10 - offsetBottom,
-                                            mouseY,
-                                        ),
-                                    );
-                                }
-
-                                let currentX =
-                                    mouseX / graphie.scale[0] +
-                                    graphie.range[0][0];
-                                let currentY =
-                                    graphie.range[1][1] -
-                                    mouseY / graphie.scale[1];
-                                if (polygon.snapX > 0) {
-                                    currentX =
-                                        Math.round(currentX / polygon.snapX) *
-                                        polygon.snapX;
-                                }
-                                if (polygon.snapY > 0) {
-                                    currentY =
-                                        Math.round(currentY / polygon.snapY) *
-                                        polygon.snapY;
-                                }
-
-                                if (event.type === "vmousemove") {
-                                    let dX = currentX - startX;
-                                    let dY = currentY - startY;
-
-                                    let doMove = true;
-                                    if (_.isFunction(polygon.onMove)) {
-                                        const onMoveResult = polygon.onMove(
-                                            dX,
-                                            dY,
-                                        );
-                                        if (onMoveResult === false) {
-                                            doMove = false;
-                                        } else if (_.isArray(onMoveResult)) {
-                                            dX = onMoveResult[0];
-                                            dY = onMoveResult[1];
-                                            currentX = startX + dX;
-                                            currentY = startY + dY;
-                                        }
-                                    }
-
-                                    const increment = function (i) {
-                                        return [
-                                            polygonCoords[i][0] + dX,
-                                            polygonCoords[i][1] + dY,
-                                        ];
-                                    };
-
-                                    if (doMove) {
-                                        _.each(
-                                            polygon.points,
-                                            function (coordOrPoint, i) {
-                                                if (isPoint(coordOrPoint)) {
-                                                    coordOrPoint.setCoord(
-                                                        increment(i),
-                                                    );
-                                                } else {
-                                                    polygon.points[i] =
-                                                        increment(i);
-                                                }
-                                            },
-                                        );
-
-                                        polygon.transform();
-
-                                        $(polygon).trigger("move");
-
-                                        lastX = currentX;
-                                        lastY = currentY;
-                                    }
-                                } else if (event.type === "vmouseup") {
-                                    $(document).unbind(".polygon");
-
-                                    const points = _.filter(
-                                        polygon.points,
-                                        isPoint,
-                                    );
-                                    _.each(points, function (point) {
-                                        point.dragging = false;
-                                    });
-
-                                    polygon.dragging = false;
-                                    dragging = false;
-                                    if (!polygon.highlight) {
-                                        polygon.visibleShape.animate(
-                                            polygon.normalStyle,
-                                            50,
-                                        );
-
-                                        _.each(points, function (point) {
-                                            point.visibleShape.animate(
-                                                point.normalStyle,
-                                                50,
-                                            );
-                                        });
-                                    }
-                                    if (_.isFunction(polygon.onMoveEnd)) {
-                                        polygon.onMoveEnd(
-                                            lastX - startX,
-                                            lastY - startY,
-                                        );
-                                    }
-                                }
-                            },
-                        );
-                    }
-                },
-            );
-        }
-
-        // Bring any movable points to the front
-        _.invoke(_.filter(polygon.points, isPoint), "toFront");
-
-        return polygon;
-    },
-
-    /**
-     * Constrain a point to be within the graph (including padding).
-     * If outside graph, point's x and y coordinates are clamped within
-     * the graph.
-     */
-    constrainToBounds: function (point, padding) {
-        const lower = this.unscalePoint([padding, this.ypixels - padding]);
-        const upper = this.unscalePoint([this.xpixels - padding, padding]);
-        const coordX = Math.max(lower[0], Math.min(upper[0], point[0]));
-        const coordY = Math.max(lower[1], Math.min(upper[1], point[1]));
-        return [coordX, coordY];
-    },
-
-    /**
-     * Constrain a point to be within the graph (including padding).
-     * If outside graph, point is moved along the ray specified by angle
-     * until inside graph.
-     */
-    constrainToBoundsOnAngle: function (point, padding, angle) {
-        const lower = this.unscalePoint([padding, this.ypixels - padding]);
-        const upper = this.unscalePoint([this.xpixels - padding, padding]);
-
-        let result = point.slice();
-
-        if (result[0] < lower[0]) {
-            result = [
-                lower[0],
-                result[1] + (lower[0] - result[0]) * Math.tan(angle),
-            ];
-        } else if (result[0] > upper[0]) {
-            result = [
-                upper[0],
-                result[1] - (result[0] - upper[0]) * Math.tan(angle),
-            ];
-        }
-
-        if (result[1] < lower[1]) {
-            result = [
-                result[0] + (lower[1] - result[1]) / Math.tan(angle),
-                lower[1],
-            ];
-        } else if (result[1] > upper[1]) {
-            result = [
-                result[0] - (result[1] - upper[1]) / Math.tan(angle),
-                upper[1],
-            ];
-        }
-
-        return result;
-    },
-
-    // MovableAngle is an angle that can be dragged around the screen.
-    // By attaching a smartPoint to the vertex and ray control points, the
-    // rays can be manipulated individually.
-    //
-    // Use only with smartPoints; add the smartPoints first, then:
-    //   addMovableAngle({points: [...]});
-    //
-    // The rays can be controlled to snap on degrees (more useful than snapping
-    // on coordinates) by setting snapDegrees to a positive integer.
-    //
-    // The returned object includes the following properties/methods:
-    //
-    //   - movableAngle.points
-    //         The movableAngle's dynamic smartPoints.
-    //
-    //   - movableAngle.coords
-    //         The movableAngle's current coordinates (generated, don't edit).
-    //
-    addMovableAngle: function (options) {
-        // $FlowFixMe[invalid-constructor]
-        return new MovableAngle(this, options);
-    },
-
-    // center: movable point
-    // radius: int
-    // circ: graphie circle
-    // perim: invisible mouse target for dragging/changing radius
-    addCircleGraph: function (options) {
-        const graphie = this;
-        const circle = $.extend(
-            {
-                center: [0, 0],
-                radius: 2,
-                snapX: 0.5,
-                snapY: 0.5,
-                snapRadius: 0.5,
-                minRadius: 1,
-                centerConstraints: {},
-                centerNormalStyle: {},
-                centerHighlightStyle: {
-                    stroke: KhanColors.INTERACTING,
-                    fill: KhanColors.INTERACTING,
-                },
-                circleNormalStyle: {
-                    stroke: KhanColors.INTERACTIVE,
-                    "fill-opacity": 0,
-                },
-                circleHighlightStyle: {
-                    stroke: KhanColors.INTERACTING,
-                    fill: KhanColors.INTERACTING,
-                    "fill-opacity": 0.05,
-                },
-            },
-            options,
-        );
-
-        const normalColor = circle.centerConstraints.fixed
-            ? KhanColors.DYNAMIC
-            : KhanColors.INTERACTIVE;
-        const centerNormalStyle = options ? options.centerNormalStyle : null;
-        circle.centerNormalStyle = _.extend(
-            {},
-            {
-                fill: normalColor,
-                stroke: normalColor,
-            },
-            centerNormalStyle,
-        );
-
-        circle.centerPoint = graphie.addMovablePoint({
-            graph: graphie,
-            coord: circle.center,
-            normalStyle: circle.centerNormalStyle,
-            snapX: circle.snapX,
-            snapY: circle.snapY,
-            constraints: circle.centerConstraints,
-        });
-        circle.circ = graphie.circle(
-            circle.center,
-            circle.radius,
-            circle.circleNormalStyle,
-        );
-        circle.perim = graphie.mouselayer
-            .circle(
-                graphie.scalePoint(circle.center)[0],
-                graphie.scalePoint(circle.center)[1],
-                graphie.scaleVector(circle.radius)[0],
-            )
-            .attr({
-                "stroke-width": 20,
-                opacity: 0.002, // This is as close to 0 as MSIE will allow
-            });
-
-        // Highlight circle circumference on center point hover
-        if (!circle.centerConstraints.fixed) {
-            $(circle.centerPoint.mouseTarget.getMouseTarget()).on(
-                "vmouseover vmouseout",
-                function (event) {
-                    if (
-                        circle.centerPoint.highlight ||
-                        circle.centerPoint.dragging
-                    ) {
-                        circle.circ.animate(circle.circleHighlightStyle, 50);
-                    } else {
-                        circle.circ.animate(circle.circleNormalStyle, 50);
-                    }
-                },
-            );
-        }
-
-        circle.toFront = function () {
-            circle.circ.toFront();
-            circle.perim.toFront();
-            circle.centerPoint.visibleShape.toFront();
-            if (!circle.centerConstraints.fixed) {
-                circle.centerPoint.mouseTarget.toFront();
-            }
-        };
-
-        circle.centerPoint.onMove = function (x, y) {
-            circle.toFront();
-            circle.circ.attr({
-                cx: graphie.scalePoint(x)[0],
-                cy: graphie.scalePoint(y)[1],
-            });
-            circle.perim.attr({
-                cx: graphie.scalePoint(x)[0],
-                cy: graphie.scalePoint(y)[1],
-            });
-            if (circle.onMove) {
-                circle.onMove(x, y);
-            }
-        };
-
-        $(circle.centerPoint).on("move", function () {
-            circle.center = this.coord;
-            $(circle).trigger("move");
-        });
-
-        // circle.setCenter(x, y) moves the circle to the specified
-        // x, y coordinate as if the user had dragged it there.
-        circle.setCenter = function (x, y) {
-            circle.centerPoint.setCoord([x, y]);
-            circle.centerPoint.onMove(x, y);
-            circle.center = [x, y];
-        };
-
-        // circle.setRadius(r) sets the circle's radius to the specified
-        // value as if the user had dragged it there.
-        circle.setRadius = function (r) {
-            circle.radius = r;
-
-            circle.perim.attr({
-                r: graphie.scaleVector(r)[0],
-            });
-            circle.circ.attr({
-                rx: graphie.scaleVector(r)[0],
-                ry: graphie.scaleVector(r)[1],
-            });
-        };
-
-        circle.remove = function () {
-            circle.centerPoint.remove();
-            circle.circ.remove();
-            circle.perim.remove();
-        };
-
-        // Define a set of axes using polar coordinates to specify
-        // which resizing cursor we want to show based on where the
-        // mouse position lies in relation to the circle's center.
-        // The first two columns in cursorAxes refer to the minimum
-        // and maximum angle values bounding a circle sector, and
-        // the third column refers to the cursor name that will be
-        // applied if the mouse position falls inside the given sector.
-        const cursorAxes = [
-            [Math.PI * -1.0, Math.PI * -0.875, "ew-resize"],
-            [Math.PI * -0.875, Math.PI * -0.625, "nesw-resize"],
-            [Math.PI * -0.625, Math.PI * -0.375, "ns-resize"],
-            [Math.PI * -0.375, Math.PI * -0.125, "nwse-resize"],
-            [Math.PI * -0.125, Math.PI * 0.125, "ew-resize"],
-            [Math.PI * 0.125, Math.PI * 0.375, "nesw-resize"],
-            [Math.PI * 0.375, Math.PI * 0.625, "ns-resize"],
-            [Math.PI * 0.625, Math.PI * 0.875, "nwse-resize"],
-            [Math.PI * 0.875, Math.PI * 1.0, "ew-resize"],
-        ];
-
-        // When the mouse moves along the circle's perimeter, we
-        // dynamically set a CSS rule to show the correct
-        // bidirectional cursor so a student knows they can resize
-        // our circle. To do this, we convert the x and y coordinates
-        // of the mouse position into polar coordinates and use the
-        // defined cursorAxes above to set our rule.
-        $(circle.perim.node).on("vmousemove", (event) => {
-            let [x, y] = this.getMouseCoord(event);
-
-            x -= circle.center[0];
-            y -= circle.center[1];
-
-            const theta = Math.atan2(y, x);
-
-            cursorAxes.forEach(function (axes) {
-                const [min, max, cursorName] = axes;
-                if (theta >= min && theta < max) {
-                    $(circle.perim.node).css("cursor", cursorName);
-                }
-            });
-        });
-
-        // Set a default resizing-friendly cursor to be safe.
-        $(circle.perim.node).css("cursor", "nesw-resize");
-
-        // Prevent the page from scrolling when we grab and drag the circle on
-        // a mobile device.
-        circle.perim.node.addEventListener(
-            "touchstart",
-            function (event) {
-                event.preventDefault();
-            },
-            {passive: false},
-        );
-
-        $(circle.perim.node).on(
-            "vmouseover vmouseout vmousedown",
-            function (event) {
-                if (event.type === "vmouseover") {
-                    circle.highlight = true;
-                    if (!dragging) {
-                        // TODO(jack): Figure out why this doesn't work
-                        // for circleHighlightStyle's that change
-                        // stroke-dasharray
-                        circle.circ.animate(circle.circleHighlightStyle, 50);
-                        circle.centerPoint.visibleShape.animate(
-                            circle.centerHighlightStyle,
-                            50,
-                        );
-                    }
-                } else if (event.type === "vmouseout") {
-                    circle.highlight = false;
-                    if (!circle.dragging && !circle.centerPoint.dragging) {
-                        circle.circ.animate(circle.circleNormalStyle, 50);
-                        circle.centerPoint.visibleShape.animate(
-                            circle.centerNormalStyle,
-                            50,
-                        );
-                    }
-                } else if (
-                    event.type === "vmousedown" &&
-                    (event.which === 1 || event.which === 0)
-                ) {
-                    event.preventDefault();
-                    circle.toFront();
-                    const startRadius = circle.radius;
-
-                    $(document).on("vmousemove vmouseup", function (event) {
-                        event.preventDefault();
-                        circle.dragging = true;
-                        dragging = true;
-
-                        if (event.type === "vmousemove") {
-                            const coord = graphie.constrainToBounds(
-                                graphie.getMouseCoord(event),
-                                10,
-                            );
-
-                            let radius = GraphUtils.getDistance(
-                                circle.centerPoint.coord,
-                                coord,
-                            );
-                            radius = Math.max(
-                                circle.minRadius,
-                                Math.round(radius / circle.snapRadius) *
-                                    circle.snapRadius,
-                            );
-                            const oldRadius = circle.radius;
-                            let doResize = true;
-                            if (circle.onResize) {
-                                const onResizeResult = circle.onResize(
-                                    radius,
-                                    oldRadius,
-                                );
-                                if (_.isNumber(onResizeResult)) {
-                                    radius = onResizeResult;
-                                } else if (onResizeResult === false) {
-                                    doResize = false;
-                                }
-                            }
-                            if (doResize) {
-                                circle.setRadius(radius);
-                                $(circle).trigger("move");
-                            }
-                        } else if (event.type === "vmouseup") {
-                            $(document).off("vmousemove vmouseup");
-                            circle.dragging = false;
-                            dragging = false;
-                            if (circle.onResizeEnd) {
-                                circle.onResizeEnd(circle.radius, startRadius);
-                            }
-                        }
-                    });
-                }
-            },
-        );
-
-        return circle;
-    },
-
-    addRotateHandle: (function () {
-        const drawRotateHandle = function (
-            graphie,
-            center,
-            radius,
-            halfWidth,
-            lengthAngle,
-            angle,
-            interacting,
-        ) {
-            const getRotateHandlePoint = function (
-                offset,
-                distanceFromArrowMidline,
-            ) {
-                const distFromRotationCenter =
-                    radius + distanceFromArrowMidline;
-                const vec = kvector.cartFromPolarDeg(
-                    distFromRotationCenter,
-                    angle + offset,
-                );
-                const absolute = kvector.add(center, vec);
-                const pixels = graphie.scalePoint(absolute);
-                return pixels[0] + "," + pixels[1];
-            };
-
-            const innerR = graphie.scaleVector(radius - halfWidth);
-            const outerR = graphie.scaleVector(radius + halfWidth);
-
-            // Draw the double-headed arrow thing that shows users where to
-            // click and drag to rotate
-            return graphie.raphael
-                .path(
-                    // upper arrowhead
-                    " M" +
-                        getRotateHandlePoint(lengthAngle, -halfWidth) +
-                        " L" +
-                        getRotateHandlePoint(lengthAngle, -3 * halfWidth) +
-                        " L" +
-                        getRotateHandlePoint(2 * lengthAngle, 0) +
-                        " L" +
-                        getRotateHandlePoint(lengthAngle, 3 * halfWidth) +
-                        " L" +
-                        getRotateHandlePoint(lengthAngle, halfWidth) +
-                        // outer arc
-                        " A" +
-                        outerR[0] +
-                        "," +
-                        outerR[1] +
-                        ",0,0,1," +
-                        getRotateHandlePoint(-lengthAngle, halfWidth) +
-                        // lower arrowhead
-                        " L" +
-                        getRotateHandlePoint(-lengthAngle, 3 * halfWidth) +
-                        " L" +
-                        getRotateHandlePoint(-2 * lengthAngle, 0) +
-                        " L" +
-                        getRotateHandlePoint(-lengthAngle, -3 * halfWidth) +
-                        " L" +
-                        getRotateHandlePoint(-lengthAngle, -halfWidth) +
-                        // inner arc
-                        " A" +
-                        innerR[0] +
-                        "," +
-                        innerR[1] +
-                        ",0,0,0," +
-                        getRotateHandlePoint(lengthAngle, -halfWidth) +
-                        " Z",
-                )
-                .attr({
-                    stroke: null,
-                    fill: interacting
-                        ? KhanColors.INTERACTING
-                        : KhanColors.INTERACTIVE,
-                });
-        };
-
-        return function (options) {
-            const graph = this;
-
-            let rotatePoint = options.center;
-            const radius = options.radius;
-            const lengthAngle = options.lengthAngle || 30;
-            const hideArrow = options.hideArrow || false;
-            const mouseTarget = options.mouseTarget;
-            const id = _.uniqueId("rotateHandle");
-
-            // Normalize rotatePoint into something that always looks
-            // like a movablePoint
-            if (_.isArray(rotatePoint)) {
-                rotatePoint = {
-                    coord: rotatePoint,
-                };
-            }
-
-            const rotateHandle = graph.addMovablePoint({
-                coord: kpoint.addVector(
-                    rotatePoint.coord,
-                    kvector.cartFromPolarDeg(radius, options.angleDeg || 0),
-                ),
-                constraints: {
-                    fixedDistance: {
-                        dist: radius,
-                        point: rotatePoint,
-                    },
-                },
-                mouseTarget: mouseTarget,
-            });
-
-            // move the rotatePoint in front of the rotateHandle to avoid
-            // confusing clicking/scaling of the rotateHandle when the user
-            // intends to click on the rotatePoint
-            // $FlowFixMe[prop-missing]
-            rotatePoint.toFront();
-
-            let rotatePointPrevCoord = rotatePoint.coord;
-            let rotateHandlePrevCoord = rotateHandle.coord;
-            let rotateHandleStartCoord = rotateHandlePrevCoord;
-            let isRotating = false;
-            let isHovering = false;
-            let drawnRotateHandle;
-
-            const redrawRotateHandle = function (handleCoord) {
-                if (hideArrow) {
-                    return; // Don't draw anything!
-                }
-
-                const handleVec = kvector.subtract(
-                    handleCoord,
-                    rotatePoint.coord,
-                );
-                const handlePolar = kvector.polarDegFromCart(handleVec);
-                const angle = handlePolar[1];
-
-                if (drawnRotateHandle) {
-                    drawnRotateHandle.remove();
-                }
-
-                drawnRotateHandle = drawRotateHandle(
-                    graph,
-                    rotatePoint.coord,
-                    options.radius,
-                    isRotating || isHovering
-                        ? options.hoverWidth / 2
-                        : options.width / 2,
-                    lengthAngle,
-                    angle,
-                    isRotating || isHovering,
-                );
-            };
-
-            // when the rotation center moves, we need to move
-            // the rotationHandle as well, or it will end up out
-            // of sync
-            $(rotatePoint).on("move." + id, function () {
-                const delta = kvector.subtract(
-                    rotatePoint.coord,
-                    rotatePointPrevCoord,
-                );
-
-                rotateHandle.setCoord(kvector.add(rotateHandle.coord, delta));
-
-                redrawRotateHandle(rotateHandle.coord);
-
-                rotatePointPrevCoord = rotatePoint.coord;
-                rotateHandle.constraints.fixedDistance.point = rotatePoint;
-                rotateHandlePrevCoord = rotateHandle.coord;
-            });
-
-            // Rotate polygon with rotateHandle
-            rotateHandle.onMove = function (x, y) {
-                if (!isRotating) {
-                    rotateHandleStartCoord = rotateHandlePrevCoord;
-                    isRotating = true;
-                }
-
-                let coord = [x, y];
-
-                if (options.onMove) {
-                    const oldPolar = kvector.polarDegFromCart(
-                        kvector.subtract(
-                            rotateHandlePrevCoord,
-                            rotatePoint.coord,
-                        ),
-                    );
-                    const newPolar = kvector.polarDegFromCart(
-                        kvector.subtract(coord, rotatePoint.coord),
-                    );
-
-                    const oldAngle = oldPolar[1];
-                    const newAngle = newPolar[1];
-                    let result = options.onMove(newAngle, oldAngle);
-                    // $FlowFixMe[incompatible-type] add proper onMove param type
-                    if (result != null && result !== true) {
-                        // $FlowFixMe[incompatible-type] add proper onMove param type
-                        if (result === false) {
-                            result = oldAngle;
-                        }
-                        coord = kvector.add(
-                            rotatePoint.coord,
-                            kvector.cartFromPolarDeg(oldPolar[0], result),
-                        );
-                    }
-                }
-
-                redrawRotateHandle(coord);
-
-                rotateHandlePrevCoord = coord;
-                return coord;
-            };
-
-            rotateHandle.onMoveEnd = function () {
-                isRotating = false;
-                redrawRotateHandle(rotateHandle.coord);
-                if (options.onMoveEnd) {
-                    const oldPolar = kvector.polarDegFromCart(
-                        kvector.subtract(
-                            rotateHandleStartCoord,
-                            rotatePoint.coord,
-                        ),
-                    );
-                    const newPolar = kvector.polarDegFromCart(
-                        kvector.subtract(rotateHandle.coord, rotatePoint.coord),
-                    );
-                    options.onMoveEnd(newPolar[1], oldPolar[1]);
-                }
-            };
-
-            // Remove the default dot added by the movablePoint since we have
-            // our double-arrow thing
-            rotateHandle.visibleShape.remove();
-
-            if (!mouseTarget) {
-                // Make the default mouse target bigger to encompass the whole
-                // area around the double-arrow thing
-                rotateHandle.mouseTarget.attr({scale: 2});
-            }
-
-            const $mouseTarget = $(rotateHandle.mouseTarget.getMouseTarget());
-            $mouseTarget.bind("vmouseover", function (e) {
-                isHovering = true;
-                redrawRotateHandle(rotateHandle.coord);
-            });
-            $mouseTarget.bind("vmouseout", function (e) {
-                isHovering = false;
-                redrawRotateHandle(rotateHandle.coord);
-            });
-
-            redrawRotateHandle(rotateHandle.coord);
-
-            const oldRemove = rotateHandle.remove;
-            rotateHandle.remove = function () {
-                oldRemove.call(rotateHandle);
-                if (drawnRotateHandle) {
-                    drawnRotateHandle.remove();
-                }
-                $(rotatePoint).off("move." + id);
-            };
-
-            rotateHandle.update = function () {
-                redrawRotateHandle(rotateHandle.coord);
-            };
-
-            return rotateHandle;
-        };
-    })(),
-
-    addReflectButton: (function () {
-        const drawButton = function (
-            graphie,
-            buttonCoord,
-            lineCoords,
-            size,
-            distanceFromCenter,
-            leftStyle,
-            rightStyle,
-        ) {
-            // Avoid invalid lines
-            if (kpoint.equal(lineCoords[0], lineCoords[1])) {
-                lineCoords = [
-                    lineCoords[0],
-                    kpoint.addVector(lineCoords[0], [1, 1]),
-                ];
-            }
-
-            const lineDirection = kvector.normalize(
-                kvector.subtract(lineCoords[1], lineCoords[0]),
-            );
-
-            const lineVec = kvector.scale(lineDirection, size / 2);
-
-            const centerVec = kvector.scale(lineDirection, distanceFromCenter);
-            const leftCenterVec = kvector.rotateDeg(centerVec, 90);
-            const rightCenterVec = kvector.rotateDeg(centerVec, -90);
-
-            const negLineVec = kvector.negate(lineVec);
-            const leftVec = kvector.rotateDeg(lineVec, 90);
-            const rightVec = kvector.rotateDeg(lineVec, -90);
-
-            const leftCenter = kpoint.addVectors(buttonCoord, leftCenterVec);
-            const rightCenter = kpoint.addVectors(buttonCoord, rightCenterVec);
-
-            const leftCoord1 = kpoint.addVectors(
-                buttonCoord,
-                leftCenterVec,
-                lineVec,
-                leftVec,
-            );
-            const leftCoord2 = kpoint.addVectors(
-                buttonCoord,
-                leftCenterVec,
-                negLineVec,
-                leftVec,
-            );
-            const rightCoord1 = kpoint.addVectors(
-                buttonCoord,
-                rightCenterVec,
-                lineVec,
-                rightVec,
-            );
-            const rightCoord2 = kpoint.addVectors(
-                buttonCoord,
-                rightCenterVec,
-                negLineVec,
-                rightVec,
-            );
-
-            const leftButton = graphie.path(
-                [leftCenter, leftCoord1, leftCoord2, true],
-                leftStyle,
-            );
-            const rightButton = graphie.path(
-                [rightCenter, rightCoord1, rightCoord2, true],
-                rightStyle,
-            );
-
-            return {
-                remove: function () {
-                    leftButton.remove();
-                    rightButton.remove();
-                },
-            };
-        };
-
-        return function (options) {
-            const graphie = this;
-
-            const line = options.line;
-
-            const button = graphie.addMovablePoint({
-                constraints: options.constraints,
-                coord: kline.midpoint([line.pointA.coord, line.pointZ.coord]),
-                snapX: graphie.snap[0],
-                snapY: graphie.snap[1],
-                onMove: function (x, y) {
-                    // Don't allow the button to actually move. This is a hack
-                    // around the inability to both set a point as fixed AND
-                    // allow it to be clicked.
-                    return false;
-                },
-                onMoveEnd: function (x, y) {
-                    if (options.onMoveEnd) {
-                        options.onMoveEnd.call(this, x, y);
-                    }
-                },
-            });
-
-            let isHovering = false;
-            let isFlipped = false;
-            let currentlyDrawnButton;
-
-            const isHighlight = function () {
-                return isHovering;
-            };
-
-            const styles = _.map([0, 1], function (isHighlight) {
-                const baseStyle = isHighlight
-                    ? options.highlightStyle
-                    : options.normalStyle;
-
-                return _.map([0, 1], function (opacity) {
-                    return _.defaults(
-                        {
-                            "fill-opacity": opacity,
-                        },
-                        baseStyle,
-                    );
-                });
-            });
-
-            const getStyle = function (isRight) {
-                if (isFlipped) {
-                    isRight = !isRight;
-                }
-                return styles[+isHighlight()][+isRight];
-            };
-
-            const redraw = function (coord, lineCoords) {
-                if (currentlyDrawnButton) {
-                    currentlyDrawnButton.remove();
-                }
-                currentlyDrawnButton = drawButton(
-                    graphie,
-                    coord,
-                    lineCoords,
-                    isHighlight() ? options.size * 1.5 : options.size,
-                    isHighlight() ? options.size * 0.125 : 0.25,
-                    getStyle(0),
-                    getStyle(1),
-                );
-            };
-
-            const update = function (coordA, coordZ) {
-                coordA = coordA || line.pointA.coord;
-                coordZ = coordZ || line.pointZ.coord;
-
-                const buttonCoord = kline.midpoint([coordA, coordZ]);
-                button.setCoord(buttonCoord);
-
-                redraw(buttonCoord, [coordA, coordZ]);
-            };
-
-            $(line).on("move", _.bind(update, button, null, null));
-
-            const $mouseTarget = $(button.mouseTarget.getMouseTarget());
-            $mouseTarget.on("vclick", function () {
-                const result = options.onClick();
-                if (result !== false) {
-                    isFlipped = !isFlipped;
-                    redraw(button.coord, [
-                        line.pointA.coord,
-                        line.pointZ.coord,
-                    ]);
-                }
-            });
-
-            // Bring the reflection line handles in front of the button, so
-            // that if we drag the reflectPoints really close together, we can
-            // still move the handles away from each other, rather than only
-            // being able to apply the reflection.
-            line.pointA.toFront();
-            line.pointZ.toFront();
-
-            // Replace the visual point with the double triangle thing
-            button.visibleShape.remove();
-            const pointScale = graphie.scaleVector(options.size)[0] / 20;
-            button.mouseTarget.attr({scale: 1.5 * pointScale});
-            $mouseTarget.css("cursor", "pointer");
-
-            // Make the arrow-thing grow and shrink with mouseover/out
-            $mouseTarget.bind("vmouseover", function (e) {
-                isHovering = true;
-                redraw(button.coord, [line.pointA.coord, line.pointZ.coord]);
-            });
-            $mouseTarget.bind("vmouseout", function (e) {
-                isHovering = false;
-                redraw(button.coord, [line.pointA.coord, line.pointZ.coord]);
-            });
-
-            const oldButtonRemove = button.remove;
-            button.remove = function () {
-                currentlyDrawnButton.remove();
-                oldButtonRemove.call(button);
-            };
-
-            button.update = update;
-            button.isFlipped = function () {
-                return isFlipped;
-            };
-
-            update();
-            return button;
-        };
-    })(),
-
-    protractor: function (center) {
-        // $FlowFixMe[invalid-constructor]
-        return new Protractor(this, center);
-    },
-
-    ruler: function (options) {
-        // $FlowFixMe[invalid-constructor]
-        return new Ruler(this, options || {});
-    },
-
-    addPoints: addPoints,
-});
-
-function Protractor(graph, center) {
-    this.set = graph.raphael.set();
-
-    this.cx = center[0];
-    this.cy = center[1];
-    const pro = this;
-
-    const r = graph.unscaleVector(180.5)[0];
-    const imgPos = graph.scalePoint([
-        this.cx - r,
-        this.cy + r - graph.unscaleVector(10.5)[1],
-    ]);
-    const image = graph.mouselayer.image(
-        "https://ka-perseus-graphie.s3.amazonaws.com/e9d032f2ab8b95979f674fbfa67056442ba1ff6a.png",
-        imgPos[0],
-        imgPos[1],
-        360,
-        180,
-    );
-    this.set.push(image);
-
-    // Prevent the page from scrolling when we grab and drag the image on a
-    // mobile device.
-    image.node.addEventListener(
-        "touchstart",
-        function (event) {
-            event.preventDefault();
-        },
-        {passive: false},
-    );
-
-    const arrowHelper = function (angle, pixelsFromEdge) {
-        const scaledRadius = graph.scaleVector(r);
-        scaledRadius[0] -= 16;
-        scaledRadius[1] -= 16;
-        const scaledCenter = graph.scalePoint(center);
-        const x =
-            Math.sin(((angle + 90) * Math.PI) / 180) *
-                (scaledRadius[0] + pixelsFromEdge) +
-            scaledCenter[0];
-        const y =
-            Math.cos(((angle + 90) * Math.PI) / 180) *
-                (scaledRadius[1] + pixelsFromEdge) +
-            scaledCenter[1];
-        return x + "," + y;
-    };
-
-    const arrow = graph.raphael
-        .path(
-            " M" +
-                arrowHelper(180, 6) +
-                " L" +
-                arrowHelper(180, 2) +
-                " L" +
-                arrowHelper(183, 10) +
-                " L" +
-                arrowHelper(180, 18) +
-                " L" +
-                arrowHelper(180, 14) +
-                " A" +
-                (graph.scaleVector(r)[0] + 10) +
-                "," +
-                (graph.scaleVector(r)[1] + 10) +
-                ",0,0,1," +
-                arrowHelper(170, 14) +
-                " L" +
-                arrowHelper(170, 18) +
-                " L" +
-                arrowHelper(167, 10) +
-                " L" +
-                arrowHelper(170, 2) +
-                " L" +
-                arrowHelper(170, 6) +
-                " A" +
-                (graph.scaleVector(r)[0] + 10) +
-                "," +
-                (graph.scaleVector(r)[1] + 10) +
-                ",0,0,0," +
-                arrowHelper(180, 6) +
-                " Z",
-        )
-        .attr({
-            stroke: null,
-            fill: KhanColors.INTERACTIVE,
-        });
-
-    // add it to the set so it translates with everything else
-    this.set.push(arrow);
-
-    this.centerPoint = graph.addMovablePoint({
-        coord: center,
-        visible: false,
-    });
-
-    // Use a movablePoint for rotation
-    this.rotateHandle = graph.addMovablePoint({
-        bounded: false,
-        coord: [
-            Math.sin((275 * Math.PI) / 180) * r + this.cx,
-            Math.cos((275 * Math.PI) / 180) * r + this.cy,
-        ],
-        onMove: function (x, y) {
-            const angle =
-                (Math.atan2(
-                    pro.centerPoint.coord[1] - y,
-                    pro.centerPoint.coord[0] - x,
-                ) *
-                    180) /
-                Math.PI;
-            pro.rotate(-angle - 5, true);
-        },
-    });
-
-    // Add a constraint so the point moves in a circle
-    this.rotateHandle.constraints.fixedDistance.dist = r;
-    this.rotateHandle.constraints.fixedDistance.point = this.centerPoint;
-
-    // Remove the default dot added by the movablePoint since we have our
-    // double-arrow thing
-    this.rotateHandle.visibleShape.remove();
-    // Make the mouse target bigger to encompass the whole area around the
-    // double-arrow thing
-    this.rotateHandle.mouseTarget.attr({scale: 2.0});
-
-    let isDragging = false;
-    let isHovering = false;
-    const isHighlight = function () {
-        return isHovering || isDragging;
-    };
-
-    const self = this;
-    const $mouseTarget = $(self.rotateHandle.mouseTarget.getMouseTarget());
-    $mouseTarget.bind("vmousedown", function (event) {
-        isDragging = true;
-        $mouseTarget.css("cursor", "-webkit-grabbing");
-        $mouseTarget.css("cursor", "grabbing");
-        arrow.animate({scale: 1.5, fill: KhanColors.INTERACTING}, 50);
-
-        $(document).bind("vmouseup.rotateHandle", function (event) {
-            isDragging = false;
-            $mouseTarget.css("cursor", "-webkit-grab");
-            $mouseTarget.css("cursor", "grab");
-
-            if (!isHighlight()) {
-                arrow.animate({scale: 1.0, fill: KhanColors.INTERACTIVE}, 50);
-            }
-
-            $(document).unbind("vmouseup.rotateHandle");
-        });
-    });
-
-    $mouseTarget.bind("vmouseover", function (event) {
-        isHovering = true;
-        arrow.animate({scale: 1.5, fill: KhanColors.INTERACTING}, 50);
-    });
-    $mouseTarget.bind("vmouseout", function (event) {
-        isHovering = false;
-        if (!isHighlight()) {
-            arrow.animate({scale: 1.0, fill: KhanColors.INTERACTIVE}, 50);
-        }
-    });
-
-    const setNodes = $.map(this.set, function (el) {
-        return el.node;
-    });
-    this.makeTranslatable = function makeTranslatable() {
-        $(setNodes).css("cursor", "move");
-        $mouseTarget.css("cursor", "-webkit-grab");
-        $mouseTarget.css("cursor", "grab");
-
-        $(setNodes).bind("vmousedown", function (event) {
-            event.preventDefault();
-            let startx =
-                event.pageX - $(graph.raphael.canvas.parentNode).offset().left;
-            let starty =
-                event.pageY - $(graph.raphael.canvas.parentNode).offset().top;
-
-            $(document).bind("vmousemove.protractor", function (event) {
-                let mouseX =
-                    event.pageX -
-                    $(graph.raphael.canvas.parentNode).offset().left;
-                let mouseY =
-                    event.pageY -
-                    $(graph.raphael.canvas.parentNode).offset().top;
-                // can't go beyond 10 pixels from the edge
-                mouseX = Math.max(10, Math.min(graph.xpixels - 10, mouseX));
-                mouseY = Math.max(10, Math.min(graph.ypixels - 10, mouseY));
-
-                const dx = mouseX - startx;
-                const dy = mouseY - starty;
-
-                $.each(pro.set.items, function () {
-                    this.translate(dx, dy);
-                });
-                pro.centerPoint.setCoord([
-                    pro.centerPoint.coord[0] + dx / graph.scale[0],
-                    pro.centerPoint.coord[1] - dy / graph.scale[1],
-                ]);
-                pro.rotateHandle.setCoord([
-                    pro.rotateHandle.coord[0] + dx / graph.scale[0],
-                    pro.rotateHandle.coord[1] - dy / graph.scale[1],
-                ]);
-                startx = mouseX;
-                starty = mouseY;
-            });
-
-            $(document).one("vmouseup", function (event) {
-                $(document).unbind("vmousemove.protractor");
-            });
-        });
-    };
-
-    this.rotation = 0;
-
-    this.rotate = function (offset, absolute) {
-        const center = graph.scalePoint(this.centerPoint.coord);
-
-        if (absolute) {
-            this.rotation = 0;
-        }
-
-        this.set.rotate(this.rotation + offset, center[0], center[1]);
-        this.rotation = this.rotation + offset;
-
-        return this;
-    };
-
-    this.moveTo = function moveTo(x, y) {
-        const start = graph.scalePoint(pro.centerPoint.coord);
-        const end = graph.scalePoint([x, y]);
-        const time = GraphUtils.getDistance(start, end) * 2;
-
-        $({x: start[0], y: start[1]}).animate(
-            {x: end[0], y: end[1]},
-            {
-                duration: time,
-                step: function (now, fx) {
-                    let dx = 0;
-                    let dy = 0;
-                    if (fx.prop === "x") {
-                        dx = now - graph.scalePoint(pro.centerPoint.coord)[0];
-                    } else if (fx.prop === "y") {
-                        dy = now - graph.scalePoint(pro.centerPoint.coord)[1];
-                    }
-                    $.each(pro.set.items, function () {
-                        this.translate(dx, dy);
-                    });
-                    pro.centerPoint.setCoord([
-                        pro.centerPoint.coord[0] + dx / graph.scale[0],
-                        pro.centerPoint.coord[1] - dy / graph.scale[1],
-                    ]);
-                    pro.rotateHandle.setCoord([
-                        pro.rotateHandle.coord[0] + dx / graph.scale[0],
-                        pro.rotateHandle.coord[1] - dy / graph.scale[1],
-                    ]);
-                },
-            },
-        );
-    };
-
-    this.rotateTo = function rotateTo(angle) {
-        if (Math.abs(this.rotation - angle) > 180) {
-            this.rotation += 360;
-        }
-        const time = Math.abs(this.rotation - angle) * 5;
-        // $FlowFixMe[unsupported-syntax]
-        $({0: this.rotation}).animate(
-            // $FlowFixMe[unsupported-syntax]
-            {0: angle},
-            {
-                duration: time,
-                step: function (now, fx) {
-                    pro.rotate(now, true);
-                    pro.rotateHandle.setCoord([
-                        Math.sin(((now + 275) * Math.PI) / 180) * r +
-                            pro.centerPoint.coord[0],
-                        Math.cos(((now + 275) * Math.PI) / 180) * r +
-                            pro.centerPoint.coord[1],
-                    ]);
-                },
-            },
-        );
-    };
-
-    this.remove = function () {
-        this.set.remove();
-    };
-
-    this.makeTranslatable();
-    return this;
-}
-
-function Ruler(graphie, options) {
-    _.defaults(options, {
-        center: [0, 0],
-        pixelsPerUnit: 40,
-        ticksPerUnit: 10, // 10 or power of 2
-        units: 10, // the length the ruler can measure
-        label: "", // e.g "cm" (the shorter, the better)
-        style: {
-            fill: null,
-            stroke: KhanColors.GRAY,
-        },
-    });
-
-    const light = _.extend({}, options.style, {strokeWidth: 1});
-    const bold = _.extend({}, options.style, {strokeWidth: 2});
-
-    const width = options.units * options.pixelsPerUnit;
-    const height = 50;
-
-    const leftBottom = graphie.unscalePoint(
-        kvector.subtract(
-            graphie.scalePoint(options.center),
-            kvector.scale([width, -height], 0.5),
-        ),
-    );
-
-    const graphieUnitsPerUnit = options.pixelsPerUnit / graphie.scale[0];
-    const graphieUnitsHeight = height / graphie.scale[0];
-
-    const rightTop = kvector.add(leftBottom, [
-        options.units * graphieUnitsPerUnit,
-        graphieUnitsHeight,
-    ]);
-
-    const tickHeight = 1.0;
-    let tickHeightMap;
-
-    if (options.ticksPerUnit === 10) {
-        // decimal, as on a centimeter ruler
-        tickHeightMap = {
-            // $FlowFixMe[unsupported-syntax]
-            10: tickHeight,
-            // $FlowFixMe[unsupported-syntax]
-            5: tickHeight * 0.55,
-            // $FlowFixMe[unsupported-syntax]
-            1: tickHeight * 0.35,
-        };
-    } else {
-        const sizes = [1, 0.6, 0.45, 0.3];
-
-        tickHeightMap = {};
-        for (let i = options.ticksPerUnit; i >= 1; i /= 2) {
-            tickHeightMap[i] = tickHeight * (sizes.shift() || 0.2);
-        }
-    }
-
-    const tickFrequencies = _.keys(tickHeightMap).sort(function (a, b) {
-        return b - a;
-    });
-
-    function getTickHeight(i): number {
-        for (let k = 0; k < tickFrequencies.length; k++) {
-            const key = tickFrequencies[k];
-            if (i % key === 0) {
-                return tickHeightMap[key];
-            }
-        }
-        return 0;
-    }
-
-    const left = leftBottom[0];
-    const bottom = leftBottom[1];
-    const right = rightTop[0];
-    const top = rightTop[1];
-
-    const numTicks = options.units * options.ticksPerUnit + 1;
-
-    const set = graphie.raphael.set();
-
-    const px = 1 / graphie.scale[0];
-    set.push(graphie.line([left - px, bottom], [right + px, bottom], bold));
-    set.push(graphie.line([left - px, top], [right + px, top], bold));
-
-    _.times(numTicks, function (i) {
-        const n = i / options.ticksPerUnit;
-        const x = left + n * graphieUnitsPerUnit;
-        const height = getTickHeight(i) * graphieUnitsHeight;
-
-        const style = i === 0 || i === numTicks - 1 ? bold : light;
-        set.push(graphie.line([x, bottom], [x, bottom + height], style));
-
-        if (n % 1 === 0) {
-            const coord = graphie.scalePoint([x, top]);
-            let text;
-            let offset;
-
-            if (n === 0) {
-                // Unit label
-                text = options.label;
-                offset =
-                    {
-                        mm: 13,
-                        cm: 11,
-                        m: 8,
-                        km: 11,
-                        in: 8,
-                        ft: 8,
-                        yd: 10,
-                        mi: 10,
-                    }[text] || 3 * text.toString().length;
-            } else {
-                // Tick label
-                text = n;
-                offset = -3 * (n.toString().length + 1);
-            }
-            const label = graphie.raphael.text(
-                coord[0] + offset,
-                coord[1] + 10,
-                text,
-            );
-            label.attr({
-                "font-family": "KaTeX_Main",
-                "font-size": "12px",
-                color: "#444",
-            });
-            set.push(label);
-        }
-    });
-
-    const mouseTarget = graphie.mouselayer.path(
-        GraphUtils.svgPath([
-            leftBottom,
-            [left, top],
-            rightTop,
-            [right, bottom],
-            /* closed */ true,
-        ]),
-    );
-    mouseTarget.attr({
-        fill: "#000",
-        opacity: 0,
-        stroke: "#000",
-        "stroke-width": 2,
-    });
-    set.push(mouseTarget);
-
-    // Prevent the page from scrolling when we grab and drag the ruler on a
-    // mobile device.
-    mouseTarget.node.addEventListener(
-        "touchstart",
-        function (event) {
-            event.preventDefault();
-        },
-        {passive: false},
-    );
-
-    const setNodes = $.map(set, function (el) {
-        return el.node;
-    });
-    $(setNodes).css("cursor", "move");
-
-    $(setNodes).bind("vmousedown", function (event) {
-        event.preventDefault();
-        let startx =
-            event.pageX - $(graphie.raphael.canvas.parentNode).offset().left;
-        let starty =
-            event.pageY - $(graphie.raphael.canvas.parentNode).offset().top;
-
-        $(document).bind("vmousemove.ruler", function (event) {
-            let mouseX =
-                event.pageX -
-                $(graphie.raphael.canvas.parentNode).offset().left;
-            let mouseY =
-                event.pageY - $(graphie.raphael.canvas.parentNode).offset().top;
-            // can't go beyond 10 pixels from the edge
-            mouseX = Math.max(10, Math.min(graphie.xpixels - 10, mouseX));
-            mouseY = Math.max(10, Math.min(graphie.ypixels - 10, mouseY));
-
-            const dx = mouseX - startx;
-            const dy = mouseY - starty;
-
-            set.translate(dx, dy);
-            leftBottomHandle.setCoord([
-                leftBottomHandle.coord[0] + dx / graphie.scale[0],
-                leftBottomHandle.coord[1] - dy / graphie.scale[1],
-            ]);
-            rightBottomHandle.setCoord([
-                rightBottomHandle.coord[0] + dx / graphie.scale[0],
-                rightBottomHandle.coord[1] - dy / graphie.scale[1],
-            ]);
-
-            startx = mouseX;
-            starty = mouseY;
-        });
-
-        $(document).one("vmouseup", function (event) {
-            $(document).unbind("vmousemove.ruler");
-        });
-    });
-
-    const leftBottomHandle = graphie.addMovablePoint({
-        coord: leftBottom,
-        normalStyle: {
-            fill: KhanColors.INTERACTIVE,
-            "fill-opacity": 0,
-            stroke: KhanColors.INTERACTIVE,
-        },
-        highlightStyle: {
-            fill: KhanColors.INTERACTING,
-            "fill-opacity": 0.1,
-            stroke: KhanColors.INTERACTING,
-        },
-        pointSize: 6, // or 8 maybe?
-        onMove: function (x, y) {
-            const dy = rightBottomHandle.coord[1] - y;
-            const dx = rightBottomHandle.coord[0] - x;
-            const angle = (Math.atan2(dy, dx) * 180) / Math.PI;
-            const center = kvector.scale(
-                kvector.add([x, y], rightBottomHandle.coord),
-                0.5,
-            );
-            const scaledCenter = graphie.scalePoint(center);
-            const oldCenter = kvector.scale(
-                kvector.add(leftBottomHandle.coord, rightBottomHandle.coord),
-                0.5,
-            );
-            const scaledOldCenter = graphie.scalePoint(oldCenter);
-            const diff = kvector.subtract(scaledCenter, scaledOldCenter);
-            set.rotate(-angle, scaledOldCenter[0], scaledOldCenter[1]);
-            set.translate(diff[0], diff[1]);
-        },
-    });
-    const rightBottomHandle = graphie.addMovablePoint({
-        coord: [right, bottom],
-        normalStyle: {
-            fill: KhanColors.INTERACTIVE,
-            "fill-opacity": 0,
-            stroke: KhanColors.INTERACTIVE,
-        },
-        highlightStyle: {
-            fill: KhanColors.INTERACTING,
-            "fill-opacity": 0.1,
-            stroke: KhanColors.INTERACTING,
-        },
-        pointSize: 6, // or 8 maybe?
-        onMove: function (x, y) {
-            const dy = y - leftBottomHandle.coord[1];
-            const dx = x - leftBottomHandle.coord[0];
-            const angle = (Math.atan2(dy, dx) * 180) / Math.PI;
-            const center = kvector.scale(
-                kvector.add([x, y], leftBottomHandle.coord),
-                0.5,
-            );
-            const scaledCenter = graphie.scalePoint(center);
-            const oldCenter = kvector.scale(
-                kvector.add(leftBottomHandle.coord, rightBottomHandle.coord),
-                0.5,
-            );
-            const scaledOldCenter = graphie.scalePoint(oldCenter);
-            const diff = kvector.subtract(scaledCenter, scaledOldCenter);
-            set.rotate(-angle, scaledOldCenter[0], scaledOldCenter[1]);
-            set.translate(diff[0], diff[1]);
-        },
-    });
-
-    // Make each handle rotate the ruler about the other one
-    leftBottomHandle.constraints.fixedDistance.dist = width / graphie.scale[0];
-    leftBottomHandle.constraints.fixedDistance.point = rightBottomHandle;
-    rightBottomHandle.constraints.fixedDistance.dist = width / graphie.scale[0];
-    rightBottomHandle.constraints.fixedDistance.point = leftBottomHandle;
-
-    this.remove = function () {
-        set.remove();
-        leftBottomHandle.remove();
-        rightBottomHandle.remove();
-    };
-
-    return this;
-}
-
-function MovableAngle(graphie, options) {
-    this.graphie = graphie;
-
-    // TODO(alex): Move standard colors from math.js to somewhere else
-    // so that they are available when this file is first parsed
-    _.extend(this, options);
-    _.defaults(this, {
-        normalStyle: {
-            stroke: KhanColors.INTERACTIVE,
-            "stroke-width": 2,
-            fill: KhanColors.INTERACTIVE,
-        },
-        highlightStyle: {
-            stroke: KhanColors.INTERACTING,
-            "stroke-width": 2,
-            fill: KhanColors.INTERACTING,
-        },
-        labelStyle: {
-            stroke: KhanColors.DYNAMIC,
-            "stroke-width": 1,
-            color: KhanColors.DYNAMIC,
-        },
-        angleStyle: {
-            stroke: KhanColors.DYNAMIC,
-            "stroke-width": 1,
-            color: KhanColors.DYNAMIC,
-        },
-        allowReflex: true, // not on MovableAngle.prototype so that
-        // it is not overridden by undefined
-    });
-
-    if (!this.points || this.points.length !== 3) {
-        throw new PerseusError(
-            "MovableAngle requires 3 points",
-            Errors.InvalidInput,
-        );
-    }
-
-    // Handle coordinates that are not MovablePoints (i.e. [2, 4])
-    this.points = _.map(
-        options.points,
-        function (point) {
-            if (_.isArray(point)) {
-                return graphie.addMovablePoint({
-                    coord: point,
-                    visible: false,
-                    constraints: {
-                        fixed: true,
-                    },
-                    normalStyle: this.normalStyle,
-                });
-            }
-            return point;
-        },
-        this,
-    );
-    this.coords = _.pluck(this.points, "coord");
-    if (this.reflex == null) {
-        if (this.allowReflex) {
-            this.reflex = this._getClockwiseAngle(this.coords) > 180;
-        } else {
-            this.reflex = false;
-        }
-    }
-
-    this.rays = _.map(
-        [0, 2],
-        function (i) {
-            return graphie.addMovableLineSegment({
-                pointA: this.points[1],
-                pointZ: this.points[i],
-                fixed: true,
-                extendRay: true,
-            });
-        },
-        this,
-    );
-
-    this.temp = [];
-    this.labeledAngle = graphie.label([0, 0], "", "center", this.labelStyle);
-
-    if (!this.fixed) {
-        this.addMoveHandlers();
-        this.addHighlightHandlers();
-    }
-    this.update();
-}
-
-_.extend(MovableAngle.prototype, {
-    points: [],
-    snapDegrees: 0,
-    snapOffsetDeg: 0,
-    angleLabel: "",
-    numArcs: 1,
-    pushOut: 0,
-    fixed: false,
-
-    addMoveHandlers: function () {
-        const graphie = this.graphie;
-
-        function tooClose(point1, point2) {
-            const safeDistance = 30;
-            const distance = GraphUtils.getDistance(
-                graphie.scalePoint(point1),
-                graphie.scalePoint(point2),
-            );
-            return distance < safeDistance;
-        }
-
-        const points = this.points;
-
-        // Drag the vertex to move the entire angle
-        points[1].onMove = function (x, y) {
-            const oldVertex = points[1].coord;
-            const newVertex = [x, y];
-            const delta = addPoints(newVertex, reverseVector(oldVertex));
-
-            let valid = true;
-            const newPoints = {};
-            _.each([0, 2], function (i) {
-                const oldPoint = points[i].coord;
-                let newPoint = addPoints(oldPoint, delta);
-
-                let angle = GraphUtils.findAngle(newVertex, newPoint);
-                angle *= Math.PI / 180;
-                newPoint = graphie.constrainToBoundsOnAngle(
-                    newPoint,
-                    10,
-                    angle,
-                );
-                newPoints[i] = newPoint;
-
-                if (tooClose(newVertex, newPoint)) {
-                    valid = false;
-                }
-            });
-
-            // Only move points if all new positions are valid
-            if (valid) {
-                _.each(newPoints, function (newPoint, i) {
-                    points[i].setCoord(newPoint);
-                });
-            }
-            return valid;
-        };
-
-        const snap = this.snapDegrees;
-        const snapOffset = this.snapOffsetDeg;
-
-        // Drag ray control points to move each ray individually
-        _.each([0, 2], function (i) {
-            points[i].onMove = function (x, y) {
-                const newPoint = [x, y];
-                const vertex = points[1].coord;
-
-                if (tooClose(vertex, newPoint)) {
-                    return false;
-                }
-                if (snap) {
-                    let angle = GraphUtils.findAngle(newPoint, vertex);
-                    angle =
-                        Math.round((angle - snapOffset) / snap) * snap +
-                        snapOffset;
-                    const distance = GraphUtils.getDistance(newPoint, vertex);
-                    return addPoints(vertex, graphie.polar(distance, angle));
-                }
-                return true;
-            };
-        });
-
-        // Expose only a single move event
-        $(points).on(
-            "move",
-            function () {
-                this.update();
-                $(this).trigger("move");
-            }.bind(this),
-        );
-    },
-
-    addHighlightHandlers: function () {
-        const vertex = this.points[1];
-
-        vertex.onHighlight = function () {
-            _.each(
-                this.points,
-                function (point) {
-                    point.visibleShape.animate(this.highlightStyle, 50);
-                },
-                this,
-            );
-            _.each(
-                this.rays,
-                function (ray) {
-                    ray.visibleLine.animate(this.highlightStyle, 50);
-                    ray.arrowStyle = _.extend({}, ray.arrowStyle, {
-                        color: this.highlightStyle.stroke,
-                        stroke: this.highlightStyle.stroke,
-                    });
-                },
-                this,
-            );
-
-            this.angleStyle = _.extend({}, this.angleStyle, {
-                color: this.highlightStyle.stroke,
-                stroke: this.highlightStyle.stroke,
-            });
-            this.update();
-        }.bind(this);
-
-        vertex.onUnhighlight = function () {
-            _.each(
-                this.points,
-                function (point) {
-                    point.visibleShape.animate(this.normalStyle, 50);
-                },
-                this,
-            );
-            _.each(
-                this.rays,
-                function (ray) {
-                    ray.visibleLine.animate(ray.normalStyle, 50);
-                    ray.arrowStyle = _.extend({}, ray.arrowStyle, {
-                        color: ray.normalStyle.stroke,
-                        stroke: ray.normalStyle.stroke,
-                    });
-                },
-                this,
-            );
-
-            this.angleStyle = _.extend({}, this.angleStyle, {
-                color: KhanColors.DYNAMIC,
-                stroke: KhanColors.DYNAMIC,
-            });
-            this.update();
-        }.bind(this);
-    },
-
-    /**
-     * Returns the angle in [0, 360) degrees created by the
-     * coords when interpreted in a clockwise direction.
-     */
-    _getClockwiseAngle: function (coords) {
-        const rawAngle = GraphUtils.findAngle(
-            // The order of these is "weird" to match what a clockwise
-            // order is in graphie.labelAngle
-            coords[2], // from the second point
-            coords[0], // clockwise to the first point
-            coords[1], // the vertex parameter is last
-        );
-        const clockwiseAngle = rawAngle + (360 % 360);
-
-        return clockwiseAngle;
-    },
-
-    isReflex: function () {
-        return this.reflex;
-    },
-
-    isClockwise: function () {
-        const clockwiseReflexive = this._getClockwiseAngle(this.coords) > 180;
-        return clockwiseReflexive === this.reflex;
-    },
-
-    getClockwiseCoords: function () {
-        if (this.isClockwise()) {
-            return _.clone(this.coords);
-        }
-        return _.clone(this.coords).reverse();
-    },
-
-    update: function (shouldChangeReflexivity) {
-        const prevCoords = this.coords;
-        this.coords = _.pluck(this.points, "coord");
-
-        // Update lines
-        _.invoke(this.points, "updateLineEnds");
-
-        const prevAngle = this._getClockwiseAngle(prevCoords);
-        const angle = this._getClockwiseAngle(this.coords);
-        const prevClockwiseReflexive = prevAngle > 180;
-        const clockwiseReflexive = angle > 180;
-
-        if (this.allowReflex) {
-            if (shouldChangeReflexivity == null) {
-                shouldChangeReflexivity =
-                    prevClockwiseReflexive !== clockwiseReflexive &&
-                    Math.abs(angle - prevAngle) < 180;
-            }
-
-            if (shouldChangeReflexivity) {
-                this.reflex = !this.reflex;
-            }
-        }
-
-        _.invoke(this.temp, "remove");
-        this.temp = this.graphie.labelAngle({
-            point1: this.coords[0],
-            vertex: this.coords[1],
-            point3: this.coords[2],
-            label: this.labeledAngle,
-            text: this.angleLabel,
-            numArcs: this.numArcs,
-            pushOut: this.pushOut,
-            clockwise: this.reflex === clockwiseReflexive,
-            style: this.angleStyle,
-        });
-    },
-
-    remove: function () {
-        _.invoke(this.rays, "remove");
-        _.invoke(this.temp, "remove");
-        this.labeledAngle.remove();
-    },
-});
-
-export default InteractiveUtils;