@khanacademy/perseus 0.0.1 → 0.2.1

package/src/interactive2/movable-polygon-options.js

@@ -0,0 +1,351 @@
+/* eslint-disable @babel/no-invalid-this */
+// @flow
+/**
+ * A library of options to pass to add/draw/remove/constraints
+ */
+
+import {point as kpoint, vector as kvector} from "@khanacademy/kmath";
+import _ from "underscore";
+
+import type {Coord} from "./types.js";
+
+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;
+}
+
+const add = {
+    constrain: function () {
+        this.constrain();
+    },
+
+    pointsToFront: function (state: $FlowFixMe) {
+        _.invoke(state.points, "toFront");
+    },
+};
+
+// $FlowFixMe[prop-missing]
+add.standard = [add.constrain, add.pointsToFront];
+
+const modify = {
+    draw: function () {
+        this.draw();
+    },
+};
+
+// $FlowFixMe[prop-missing]
+modify.standard = [modify.draw];
+
+const draw = {
+    basic: function (state: $FlowFixMe, prevState: $FlowFixMe) {
+        const graphie = this.graphie;
+        const path = this.path(state);
+
+        if (!this.state.visibleShape) {
+            this.state.visibleShape = graphie.raphael.path(path);
+            this.state.visibleShape.attr(this.normalStyle());
+        }
+        if (
+            state.normalStyle !== prevState.normalStyle &&
+            !_.isEqual(state.normalStyle, prevState.normalStyle)
+        ) {
+            this.state.visibleShape.attr(this.normalStyle());
+        }
+        this.state.visibleShape.attr({path: path});
+        if (this.mouseTarget()) {
+            this.mouseTarget().attr({path: path});
+        }
+    },
+
+    /* Labels are handled primarily by label objects, but sometimes require
+     * extra movables, e.g., for the arcs drawn at labeled angles. These extra
+     * movables are stored in the label cache. */
+    labels: function (state: $FlowFixMe, prevState: $FlowFixMe) {
+        const graphie = this.graphie;
+        const self = this;
+
+        const coords = _.invoke(state.points, "coord");
+        const isClockwise = clockwise(coords);
+        const n = coords.length;
+
+        // graphie.labelAngle and similar methods attempt to re-use the label
+        // provided, which will have been stored on state._labeledAngles.
+        // If they cannot re-use the label, they make a new one, which will
+        // get stored on state._labelCache. These will all be cleared out when
+        // we remove the polygon.
+        // (This logic is borrowed from graphie:addMovablePolygon.)
+        if (self.state._labelCache != null) {
+            _.invoke(self.state._labelCache, "remove");
+        }
+        self.state._labelCache = [];
+
+        // Update angle labels
+        if (state.angleLabels.length || state.showRightAngleMarkers.length) {
+            // Generate labels
+            if (self.state._labeledAngles == null) {
+                self.state._labeledAngles = _.times(
+                    Math.max(
+                        state.angleLabels.length,
+                        state.showRightAngleMarkers.length,
+                    ),
+                    function () {
+                        return graphie.label(
+                            [0, 0],
+                            "",
+                            "center",
+                            state.labelStyle,
+                        );
+                    },
+                );
+            }
+
+            _.each(self.state._labeledAngles, function (label, i) {
+                self.state._labelCache.push(
+                    graphie.labelAngle({
+                        point1: coords[(i - 1 + n) % n],
+                        vertex: coords[i],
+                        point3: coords[(i + 1) % n],
+                        label: label,
+                        text: state.angleLabels[i],
+                        showRightAngleMarker: state.showRightAngleMarkers[i],
+                        numArcs: state.numArcs[i],
+                        clockwise: isClockwise,
+                        style: state.labelStyle,
+                    }),
+                );
+            });
+        }
+
+        // Update side labels
+        if (state.sideLabels.length) {
+            // Generate labels
+            if (self.state._labeledSides == null) {
+                self.state._labeledSides = _.map(
+                    state.sideLabels,
+                    function (label) {
+                        return graphie.label(
+                            [0, 0],
+                            "",
+                            "center",
+                            state.labelStyle,
+                        );
+                    },
+                );
+            }
+
+            _.each(self.state._labeledSides, function (label, i) {
+                self.state._labelCache.push(
+                    graphie.labelSide({
+                        point1: coords[i],
+                        point2: coords[(i + 1) % n],
+                        label: label,
+                        text: state.sideLabels[i],
+                        numArrows: state.numArrows[i],
+                        numTicks: state.numTicks[i],
+                        clockwise: isClockwise,
+                        style: state.labelStyle,
+                    }),
+                );
+            });
+        }
+
+        // Update vertex labels
+        if (state.vertexLabels.length) {
+            // Generate labels
+            if (self.state._labeledVertices == null) {
+                self.state._labeledVertices = _.map(
+                    state.vertexLabels,
+                    function (label) {
+                        return graphie.label(
+                            [0, 0],
+                            "",
+                            "center",
+                            state.labelStyle,
+                        );
+                    },
+                );
+            }
+
+            _.each(self.state._labeledVertices, function (label, i) {
+                self.state._labelCache.push(
+                    graphie.labelVertex({
+                        point1: coords[(i - 1 + n) % n],
+                        vertex: coords[i],
+                        point3: coords[(i + 1) % n],
+                        label: label,
+                        text: state.vertexLabels[i],
+                        clockwise: isClockwise,
+                        style: state.labelStyle,
+                    }),
+                );
+            });
+        }
+
+        // graphie.labelVertex and its peer methods return an array of movables
+        self.state._labelCache = _.flatten(self.state._labelCache);
+    },
+
+    highlight: function (state: $FlowFixMe, prevState: $FlowFixMe) {
+        if (state.isHovering && !prevState.isHovering) {
+            state.visibleShape.animate(this.highlightStyle(), 50);
+        } else if (!state.isHovering && prevState.isHovering) {
+            state.visibleShape.animate(this.normalStyle(), 50);
+        }
+    },
+};
+
+// $FlowFixMe[prop-missing]
+draw.standard = [draw.basic, draw.labels, draw.highlight];
+
+const remove = {
+    basic: function () {
+        if (this.state.visibleShape) {
+            this.state.visibleShape.remove();
+        }
+    },
+    labels: function () {
+        const labels = [
+            this.state._labeledSides,
+            this.state._labeledVertices,
+            this.state._labeledAngles,
+            this.state._labelCache,
+        ];
+
+        _.each(labels, function (labelType) {
+            if (labelType != null && labelType.length) {
+                _.invoke(labelType, "remove");
+            }
+        });
+    },
+};
+
+// $FlowFixMe[prop-missing]
+remove.standard = [remove.basic, remove.labels];
+
+const constraints = {
+    fixed: function (): () => boolean {
+        return function () {
+            return false;
+        };
+    },
+
+    snap: function (snap: $FlowFixMe): (Coord) => mixed {
+        return function (coord: Coord): mixed {
+            if (snap === null) {
+                // NOTE(kevin): this should probably return the original point
+                return true;
+            }
+            snap = snap || this.graphie.snap;
+            return kpoint.roundTo(coord, snap);
+        };
+    },
+
+    bound: function (
+        range: $FlowFixMe,
+        snap: $FlowFixMe,
+        paddingPx: number,
+    ): (Coord, Coord) => Coord {
+        if (paddingPx === undefined) {
+            if (range === undefined) {
+                paddingPx = 10;
+            } else {
+                paddingPx = 0;
+            }
+        }
+        return function (coord: Coord, prevCoord: Coord): Coord {
+            const graphie = this.graphie;
+            const delta = kvector.subtract(coord, prevCoord);
+            range = range || graphie.range;
+            // A null snap means no snap; an undefined snap means
+            // default to graphie's
+            if (snap === undefined) {
+                snap = graphie.snap;
+            }
+
+            // Calculate the bounds for both points
+            let absoluteLower = graphie.unscalePoint([
+                paddingPx,
+                graphie.ypixels - paddingPx,
+            ]);
+            let absoluteUpper = graphie.unscalePoint([
+                graphie.xpixels - paddingPx,
+                paddingPx,
+            ]);
+            if (snap) {
+                absoluteLower = kpoint.ceilTo(absoluteLower, snap);
+                absoluteUpper = kpoint.floorTo(absoluteUpper, snap);
+            }
+
+            // Calculate the bounds for the delta.
+            const deltaBounds = _.map(this.coords(), function (coord, i) {
+                const max = kvector.subtract(absoluteUpper, coord);
+                const min = kvector.subtract(absoluteLower, coord);
+                return [min, max];
+            });
+
+            // bound the delta by the calculated bounds
+            const boundedDelta = _.reduce(
+                deltaBounds,
+                function (delta, bound) {
+                    const lower = bound[0];
+                    const upper = bound[1];
+                    const deltaX = Math.max(
+                        lower[0],
+                        Math.min(upper[0], delta[0]),
+                    );
+                    const deltaY = Math.max(
+                        lower[1],
+                        Math.min(upper[1], delta[1]),
+                    );
+                    return [deltaX, deltaY];
+                },
+                delta,
+            );
+
+            return kvector.add(prevCoord, boundedDelta);
+        };
+    },
+};
+
+// $FlowFixMe[prop-missing]
+constraints.standard = null;
+
+const onMove = {
+    updatePoints: function (coord: Coord, prevCoord: Coord): void {
+        const actualDelta = kvector.subtract(coord, prevCoord);
+        _.each(this.state.points, function (point) {
+            point.setCoord(kvector.add(point.coord(), actualDelta));
+        });
+    },
+};
+
+// $FlowFixMe[prop-missing]
+onMove.standard = null;
+
+export default {
+    add: add,
+    modify: modify,
+    draw: draw,
+    remove: remove,
+
+    onMoveStart: {standard: null},
+    constraints: constraints,
+    onMove: onMove,
+    onMoveEnd: {standard: null},
+    onClick: {standard: null},
+};

package/src/interactive2/movable-polygon.js

@@ -0,0 +1,368 @@
+// @flow
+/**
+ * Creates and adds a polygon to the graph that can be dragged around.
+ * It allows constraints on its movement and draws when moves happen.
+ */
+import {vector as kvector} from "@khanacademy/kmath";
+import _ from "underscore";
+
+import KhanColors from "../util/colors.js";
+import GraphUtils from "../util/graph-utils.js";
+
+import InteractiveUtil from "./interactive-util.js";
+import MovablePolygonOptions from "./movable-polygon-options.js";
+import objective_ from "./objective_.js";
+
+const assert = InteractiveUtil.assert;
+const normalizeOptions = InteractiveUtil.normalizeOptions;
+
+// State parameters that should be converted into an array of
+// functions
+const FUNCTION_ARRAY_OPTIONS = _.keys(MovablePolygonOptions);
+
+// Default "props" and "state". Both are added to this.state and
+// receive magic getter methods (this.points() etc).
+// However, properties in DEFAULT_PROPS are updated on `modify()`,
+// while those in DEFAULT_STATE persist and are not updated.
+// Things that the user might want to change should be on "props",
+// while things used to render the point should be on "state".
+const DEFAULT_PROPS = {
+    points: null,
+    angleLabels: [],
+    showRightAngleMarkers: [],
+    sideLabels: [],
+    vertexLabels: [],
+    numArcs: [],
+    numArrows: [],
+    numTicks: [],
+    closed: true,
+    static: false,
+    cursor: "move",
+    normalStyle: null, // turned into an object in this.modify
+    highlightStyle: null, // likewise
+    labelStyle: null, // likewise
+};
+const DEFAULT_STATE = {
+    added: false,
+    hasMoved: false,
+    visibleShape: null,
+    mouseTarget: null,
+};
+
+const MovablePolygon = function (
+    graphie: $FlowFixMe,
+    movable: $FlowFixMe,
+    options: $FlowFixMe,
+): void {
+    assert(graphie != null);
+    assert(options != null);
+
+    _.extend(this, {
+        graphie: graphie,
+        movable: movable,
+        state: {
+            // Set here because this must be unique for each instance
+            id: _.uniqueId("movablePolygon"),
+        },
+    });
+
+    // We only set DEFAULT_STATE once, here
+    this.modify(_.extend({}, DEFAULT_STATE, options));
+};
+
+_.extend(MovablePolygon, MovablePolygonOptions);
+InteractiveUtil.createGettersFor(
+    MovablePolygon,
+    _.extend({}, DEFAULT_PROPS, DEFAULT_STATE),
+);
+InteractiveUtil.addMovableHelperMethodsTo(MovablePolygon);
+
+_.extend(MovablePolygon.prototype, {
+    cloneState: function () {
+        return _.extend(this.movable.cloneState(), this.state);
+    },
+
+    _createDefaultState: function () {
+        return _.extend(
+            {
+                id: this.state.id,
+            },
+            normalizeOptions(
+                FUNCTION_ARRAY_OPTIONS,
+                // Defaults are copied from MovablePolygonOptions.*.standard
+                // These defaults are set here instead of DEFAULT_PROPS/STATE
+                // because they:
+                //    - are objects, not primitives (and need a deeper copy)
+                //    - they don't need getters created for them
+                // TODO(jack): Consider "default" once we es3ify perseus
+                objective_.pluck(MovablePolygonOptions, "standard"),
+
+                // We only update props here, because we want things on state to
+                // be persistent, and updated appropriately in modify()
+            ),
+            DEFAULT_PROPS,
+        );
+    },
+
+    /**
+     * Resets the object to its state as if it were constructed with
+     * `options` originally. state not on DEFAULT_PROPS is maintained.
+     *
+     * Analogous to React.js's replaceProps
+     */
+    modify: function (options) {
+        this.update(_.extend(this._createDefaultState(), options));
+    },
+
+    /**
+     * Adjusts constructor parameters without changing previous settings
+     * for any option not specified
+     *
+     * Analogous to React.js's setProps
+     */
+    update: function (options) {
+        const self = this;
+        const graphie = self.graphie;
+        const state = _.extend(
+            self.state,
+            normalizeOptions(FUNCTION_ARRAY_OPTIONS, options),
+        );
+
+        // Default things inside the state.normalStyle object, because
+        // _.extend is not deep.
+        // We use _.extend instead of _.defaults because we don't want
+        // to modify the passed-in copy (especially if it's from
+        // DEFAULT_PROPS/STATE!)
+        const normalColor = state.static
+            ? KhanColors.DYNAMIC
+            : KhanColors.INTERACTIVE;
+        state.normalStyle = _.extend(
+            {},
+            state.normalStyle,
+            {
+                "stroke-width": 2,
+                "fill-opacity": 0,
+                fill: normalColor,
+                stroke: normalColor,
+            },
+            options.normalStyle,
+        );
+
+        state.highlightStyle = _.extend(
+            {},
+            {
+                stroke: KhanColors.INTERACTING,
+                "stroke-width": 2,
+                fill: KhanColors.INTERACTING,
+                "fill-opacity": 0.05,
+            },
+            state.highlightStyle,
+        );
+
+        state.labelStyle = _.extend(
+            {},
+            {
+                stroke: KhanColors.DYNAMIC,
+                "stroke-width": 1,
+                color: KhanColors.DYNAMIC,
+            },
+            state.labelStyle,
+        );
+
+        if (!state.static) {
+            // the invisible shape in front of the point that gets mouse events
+            if (!state.mouseTarget) {
+                state.mouseTarget = graphie.mouselayer.path(this.path());
+                state.mouseTarget.attr({
+                    fill: "#000",
+                    opacity: 0,
+                    cursor: "move",
+                });
+            }
+        }
+
+        // The Movable representing this MovablePolygon's representation
+        // This handles mouse events for us, which we propagate in
+        // onMove. The onMoveStart-onMove-onMoveEnd logic is borrowed from
+        // movable-line.js.
+        self.movable.modify(
+            _.extend({}, state, {
+                modify: null,
+                draw: self.draw.bind(self),
+                remove: null,
+                onMoveStart: function () {
+                    self._initialRefCoord = self.coord(0);
+                    self._prevRefCoord = self._initialRefCoord;
+                    self._totalDelta = [0, 0];
+
+                    self._fireEvent(
+                        self.state.onMoveStart,
+                        self.coord(0),
+                        self.coord(0),
+                    );
+                },
+                onMove: function (mouseCoord, prevMouseCoord) {
+                    const delta = kvector.subtract(mouseCoord, prevMouseCoord);
+                    self._totalDelta = kvector.add(self._totalDelta, delta);
+                    let refCoord = kvector.add(
+                        self._initialRefCoord,
+                        self._totalDelta,
+                    );
+
+                    refCoord = self._applyConstraints(
+                        refCoord,
+                        self._prevRefCoord,
+                    );
+                    // $FlowFixMe[incompatible-type] _applyConstraints can return false
+                    if (refCoord === false) {
+                        return;
+                    }
+
+                    self._fireEvent(
+                        self.state.onMove,
+                        refCoord,
+                        self._prevRefCoord,
+                    );
+                    self._prevRefCoord = refCoord;
+                },
+                onMoveEnd: function () {
+                    self._fireEvent(
+                        self.state.onMoveEnd,
+                        self._prevRefCoord,
+                        self._initialRefCoord,
+                    );
+                },
+            }),
+        );
+
+        // Update the polygon with the points' movement
+        _.invoke(
+            state.points,
+            "listen",
+            "onMove",
+            state.id,
+            self.draw.bind(self),
+        );
+
+        // Trigger an add event if this hasn't been added before
+        if (!state.added) {
+            self.prevState = {};
+            self._fireEvent(state.add, self.cloneState(), self.prevState);
+            state.added = true;
+
+            // Update the state for `added` and in case the add event
+            // changed it
+            self.prevState = self.cloneState();
+        }
+
+        // Trigger a modify event
+        self._fireEvent(state.modify, self.cloneState(), self.prevState);
+    },
+
+    path: function (state) {
+        const graphie = this.graphie;
+        state = state || this.state;
+
+        let coords = _.map(state.points, function (point) {
+            return graphie.scalePoint(point.coord());
+        });
+
+        // Create path
+        if (state.closed) {
+            coords.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
+            coords = coords.concat(_.clone(coords).reverse());
+        }
+
+        return GraphUtils.unscaledSvgPath(coords);
+    },
+
+    coords: function () {
+        return _.invoke(this.state.points, "coord");
+    },
+
+    point: function (index) {
+        return this.state.points[index];
+    },
+
+    coord: function (index) {
+        return this.point(index).coord();
+    },
+
+    remove: function () {
+        this.state.added = false;
+        this._fireEvent(this.state.remove);
+        if (this.state.points) {
+            _.invoke(this.state.points, "unlisten", "onMove", this.state.id);
+        }
+
+        if (this.movable) {
+            // We need this to be guarded because it is called on the initial
+            // constructor/modify call, before this.movable is created
+            this.movable.remove();
+        }
+
+        // TODO(jack): This should really be moved off of
+        // movablePolygon.state and only kept on movable.state
+        this.state.mouseTarget = null;
+    },
+
+    constrain: function () {
+        if (this.points == null || this.points.length === 0) {
+            return;
+        }
+
+        const prevRefCoord = this.coord(0);
+        const refCoord = this._applyConstraints(prevRefCoord, prevRefCoord);
+        if (refCoord !== false) {
+            this._fireEvent(this.state.onMove, refCoord, prevRefCoord);
+        }
+    },
+
+    // Clone these for use with raphael, which modifies the input
+    // style parameters
+    normalStyle: function () {
+        return _.clone(this.state.normalStyle);
+    },
+
+    highlightStyle: function () {
+        return _.clone(this.state.highlightStyle);
+    },
+
+    // Change z-order to back
+    toBack: function () {
+        this.movable.toBack();
+        if (this.state.visibleShape) {
+            this.state.visibleShape.toBack();
+        }
+    },
+
+    // Change z-order to front
+    toFront: function () {
+        if (this.state.visibleShape) {
+            this.state.visibleShape.toFront();
+        }
+        this.movable.toFront();
+    },
+
+    /**
+     * Forwarding methods to this.movable:
+     */
+    isHovering: function () {
+        return this.movable.isHovering();
+    },
+
+    isDragging: function () {
+        return this.movable.isDragging();
+    },
+
+    mouseTarget: function () {
+        return this.movable.mouseTarget();
+    },
+});
+
+export default MovablePolygon;