@khanacademy/perseus 0.0.1 → 0.2.1

package/src/interactive2/movable.js

@@ -0,0 +1,273 @@
+// @flow
+/**
+ * Movable
+ *
+ * A Movable Something, that sends onMove events based on the
+ * mouse coordinate (graphie unscaled, non-pixel-value) of the
+ * move.
+ *
+ * Other MovableThings should generally have a Movable field, and
+ * let this class handle all of the virtual mouse events, and then
+ * take appropriate action in onMoveStart, onMove, onMoveEnd
+ */
+import {point as kpoint} from "@khanacademy/kmath";
+import $ from "jquery";
+import _ from "underscore";
+
+import InteractiveUtil from "./interactive-util.js";
+
+const normalizeOptions = InteractiveUtil.normalizeOptions;
+
+const assert = InteractiveUtil.assert;
+
+// state parameters that should be converted into an array of
+// functions
+const FUNCTION_ARRAY_OPTIONS = [
+    "add",
+    "modify",
+    "draw",
+    "remove",
+    "onMoveStart",
+    "onMove",
+    "onMoveEnd",
+    "onClick",
+];
+
+// Default "props" and "state". Both are added to this.state and
+// receive magic getter methods (this.isHovering() 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 movable should be on "state".
+const DEFAULT_PROPS = {
+    cursor: null,
+};
+const DEFAULT_STATE = {
+    added: false,
+    isHovering: false,
+    isMouseOver: false,
+    isDragging: false,
+    mouseTarget: null,
+};
+
+const Movable = function (graphie: $FlowFixMe, options: $FlowFixMe): void {
+    _.extend(this, {
+        graphie: graphie,
+        state: {
+            // Set here because this must be unique for each instance
+            id: _.uniqueId("movable"),
+        },
+    });
+
+    // We only set DEFAULT_STATE once, here
+    this.modify(_.extend({}, DEFAULT_STATE, options));
+};
+
+InteractiveUtil.createGettersFor(
+    Movable,
+    _.extend({}, DEFAULT_PROPS, DEFAULT_STATE),
+);
+InteractiveUtil.addMovableHelperMethodsTo(Movable);
+
+_.extend(Movable.prototype, {
+    cloneState: function () {
+        return _.clone(this.state);
+    },
+
+    _createDefaultState: function () {
+        return _.extend(
+            {
+                id: this.state.id,
+                add: [],
+                modify: [],
+                draw: [],
+                remove: [],
+                onMoveStart: [],
+                onMove: [],
+                onMoveEnd: [],
+                onClick: [],
+
+                // 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. The only state maintained is `state.id`
+     *
+     * Analogous to React.js's replaceProps
+     */
+    modify: function (options) {
+        this.update(_.extend({}, this._createDefaultState(), options));
+    },
+
+    /**
+     * Simulates a mouse grab event on the movable object.
+     */
+    grab: function (coord) {
+        assert(kpoint.is(coord));
+        const self = this;
+        const graphie = self.graphie;
+        const state = self.state;
+
+        state.isHovering = true;
+        state.isDragging = true;
+        graphie.isDragging = true;
+
+        const startMouseCoord = coord;
+        let prevMouseCoord = startMouseCoord;
+        self._fireEvent(state.onMoveStart, startMouseCoord, startMouseCoord);
+
+        const moveHandler = function (e) {
+            e.preventDefault();
+
+            const mouseCoord = graphie.getMouseCoord(e);
+            self._fireEvent(state.onMove, mouseCoord, prevMouseCoord);
+            self.draw();
+            prevMouseCoord = mouseCoord;
+        };
+
+        const upHandler = function (e) {
+            $(document).unbind("vmousemove", moveHandler);
+            $(document).unbind("vmouseup", upHandler);
+            if (state.isHovering) {
+                self._fireEvent(state.onClick, prevMouseCoord, startMouseCoord);
+            }
+            state.isHovering = self.state.isMouseOver;
+            state.isDragging = false;
+            graphie.isDragging = false;
+            self._fireEvent(state.onMoveEnd, prevMouseCoord, startMouseCoord);
+            self.draw();
+        };
+
+        $(document).bind("vmousemove", moveHandler);
+        $(document).bind("vmouseup", upHandler);
+    },
+
+    /**
+     * Adjusts constructor parameters without changing previous settings
+     * for any option not specified
+     *
+     * Analogous to React.js's setProps
+     */
+    update: function (options) {
+        const self = this;
+        const graphie = self.graphie;
+
+        const prevState = self.cloneState();
+        const state = _.extend(
+            self.state,
+            normalizeOptions(FUNCTION_ARRAY_OPTIONS, options),
+        );
+
+        // the invisible shape in front of the point that gets mouse events
+        if (state.mouseTarget && !prevState.mouseTarget) {
+            let $mouseTarget;
+            if (state.mouseTarget.getMouseTarget) {
+                $mouseTarget = $(state.mouseTarget.getMouseTarget());
+            } else {
+                $mouseTarget = $(state.mouseTarget[0]);
+            }
+
+            const isMouse = !("ontouchstart" in window);
+
+            if (isMouse) {
+                $mouseTarget.on("vmouseover", function () {
+                    state.isMouseOver = true;
+                    if (!graphie.isDragging) {
+                        state.isHovering = true;
+                    }
+                    if (self.state.added) {
+                        // Avoid drawing if the point has been removed
+                        self.draw();
+                    }
+                });
+
+                $mouseTarget.on("vmouseout", function () {
+                    state.isMouseOver = false;
+                    if (!state.isDragging) {
+                        state.isHovering = false;
+                    }
+                    if (self.state.added) {
+                        // Avoid drawing if the point has been removed
+                        self.draw();
+                    }
+                });
+            }
+
+            // Prevent the page from scrolling when we grab and drag the
+            // movable object on a mobile device.
+            $mouseTarget[0].addEventListener(
+                "touchstart",
+                function (event) {
+                    event.preventDefault();
+                },
+                {passive: false},
+            );
+
+            $mouseTarget.on("vmousedown", function (e) {
+                if (e.which !== 0 && e.which !== 1) {
+                    return;
+                }
+                e.preventDefault();
+
+                const mouseCoord = graphie.getMouseCoord(e);
+                self.grab(mouseCoord);
+            });
+        }
+
+        if (state.mouseTarget && state.cursor !== undefined) {
+            let $mouseTarget;
+            if (state.mouseTarget.getMouseTarget) {
+                $mouseTarget = $(state.mouseTarget.getMouseTarget());
+            } else {
+                $mouseTarget = $(state.mouseTarget[0]);
+            }
+
+            // "" removes the css cursor if state.cursor is null
+            $mouseTarget.css("cursor", state.cursor || "");
+        }
+
+        // Trigger an add event if this hasn't been added before
+        if (!state.added) {
+            self._fireEvent(state.modify, self.cloneState(), {});
+            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);
+    },
+
+    remove: function () {
+        this.state.added = false;
+        this._fireEvent(this.state.remove);
+        if (this.state.mouseTarget) {
+            $(this.state.mouseTarget).off();
+            this.state.mouseTarget.remove();
+            this.state.mouseTarget = null;
+        }
+    },
+
+    // Change z-order to back
+    toBack: function () {
+        if (this.state.mouseTarget) {
+            this.state.mouseTarget.toBack();
+        }
+    },
+
+    // Change z-order to front
+    toFront: function () {
+        if (this.state.mouseTarget) {
+            this.state.mouseTarget.toFront();
+        }
+    },
+});
+
+export default Movable;

package/src/interactive2/objective_.js

@@ -0,0 +1,79 @@
+// @flow
+/**
+ * A work-in-progress of _ methods for objects.
+ * That is, they take an object as a parameter,
+ * and return an object instead of an array.
+ *
+ * TODO(aria): Move this out of interactive2
+ */
+
+import _ from "underscore";
+
+/**
+ * Does a pluck on keys inside objects in an object
+ *
+ * Ex:
+ * tools = {
+ *     translation: {
+ *         enabled: true
+ *     },
+ *     rotation: {
+ *         enabled: false
+ *     }
+ * };
+ * pluckObject(tools, "enabled") returns {
+ *     translation: true
+ *     rotation: false
+ * }
+ */
+const pluck = function (table: $FlowFixMe, subKey: string): $FlowFixMe {
+    return _.object(
+        _.map(table, function (value, key) {
+            return [key, value[subKey]];
+        }),
+    );
+};
+
+/**
+ * Maps an object to an object
+ *
+ * > mapObject({a: '1', b: '2'}, (value, key) => {
+ *       return value + 1;
+ *   });
+ * {a: 2, b: 3}
+ */
+const mapObject = function <K: string, V, U>(
+    obj: {|[K]: V|},
+    lambda: (V, K) => U,
+): {|[K]: U|} {
+    const result = {};
+    _.each(_.keys(obj), function (key) {
+        result[key] = lambda(obj[key], key);
+    });
+    return result;
+};
+
+/**
+ * Maps an array to an object
+ *
+ * > mapObjectFromArray(['a', 'b'], function(elem) {
+ *       return elem + elem;
+ *   });
+ * {a: 'aa', b: 'bb'}
+ */
+const mapObjectFromArray = function <K: string, V>(
+    arr: $ReadOnlyArray<K>,
+    lambda: (K) => V,
+): {|[K]: V|} {
+    const result = {};
+    _.each(arr, function (elem) {
+        result[elem] = lambda(elem);
+    });
+    return result;
+};
+
+export default {
+    pluck: pluck,
+    mapObject: mapObject,
+    mapObjectFromArray: mapObjectFromArray,
+};

package/src/interactive2/types.js

@@ -0,0 +1,3 @@
+// @flow
+export type Coord = [number, number];
+export type Line = [Coord, Coord];

package/src/interactive2/wrapped-defaults.js

@@ -0,0 +1,86 @@
+/* eslint-disable @babel/no-invalid-this */
+// @flow
+/**
+ * Default methods for a wrapped movable.
+ */
+
+import {vector as kvector} from "@khanacademy/kmath";
+import $ from "jquery";
+import _ from "underscore";
+
+import InteractiveUtil from "./interactive-util.js";
+import objective_ from "./objective_.js";
+
+/*
+ * These functions, when called on the wrapped object, simply pass the
+ * arguments to the underlying Raphael object.
+ */
+const PASS_TO_RAPHAEL = ["attr", "animate"];
+
+const WrappedDefaults: $FlowFixMe = _.extend(
+    {
+        transform: function (transformation) {
+            const prefixedTransform = InteractiveUtil.getPrefixedTransform();
+            this.wrapper.style[prefixedTransform] = transformation;
+        },
+
+        toFront: function () {
+            const parentNode = this.wrapper.parentNode;
+            // TODO(emily): Sometimes, we call `.remove()` but then hold a
+            // reference to this object, and sometimes call `.toFront` on it.
+            // Notably, this happens in the reflection transformation in the
+            // Transformer widget. This is a hacky fix. Make this less bad.
+            if (parentNode) {
+                parentNode.appendChild(this.wrapper);
+            }
+        },
+
+        toBack: function () {
+            const parentNode = this.wrapper.parentNode;
+            if (parentNode.firstChild !== this.wrapper) {
+                parentNode.insertBefore(this.wrapper, parentNode.firstChild);
+            }
+        },
+
+        remove: function () {
+            this.visibleShape.remove();
+            $(this.wrapper).remove();
+        },
+
+        getMouseTarget: function () {
+            return this.visibleShape[0];
+        },
+
+        moveTo: function (point) {
+            const delta = kvector.subtract(
+                this.graphie.scalePoint(point),
+                this.graphie.scalePoint(this.initialPoint),
+            );
+            const do3dTransform = InteractiveUtil.getCanUse3dTransform();
+            const transformation =
+                "translateX(" +
+                delta[0] +
+                "px) " +
+                "translateY(" +
+                delta[1] +
+                "px)" +
+                (do3dTransform ? " translateZ(0)" : "");
+            this.transform(transformation);
+        },
+
+        hide: function () {
+            this.visibleShape.hide();
+        },
+
+        show: function () {
+            this.visibleShape.show();
+        },
+    },
+    objective_.mapObjectFromArray(PASS_TO_RAPHAEL, function (attribute) {
+        return function () {
+            this.visibleShape[attribute](...arguments);
+        };
+    }),
+);
+
+export default WrappedDefaults;

package/src/interactive2/wrapped-ellipse.js

@@ -0,0 +1,87 @@
+// @flow
+import {vector as kvector} from "@khanacademy/kmath";
+import _ from "underscore";
+
+import InteractiveUtil from "./interactive-util.js";
+import WrappedDefaults from "./wrapped-defaults.js";
+
+import type {Coord} from "./types.js";
+
+const DEFAULT_OPTIONS = {
+    maxScale: 1,
+    mouselayer: false,
+    shadow: false,
+    disableMouseEventsOnWrapper: false,
+};
+
+const WrappedEllipse = function (
+    graphie: $FlowFixMe,
+    center: Coord,
+    radii: [number, number],
+    options: $FlowFixMe,
+) {
+    options = _.extend({}, DEFAULT_OPTIONS, options);
+
+    // Add `wrapper`, `visibleShape`, and remaining properties.
+    const fixedEllipse = graphie.fixedEllipse(
+        center,
+        radii,
+        options.maxScale,
+        options.padding,
+    );
+    _.extend(this, fixedEllipse, {
+        graphie: graphie,
+        initialPoint: center,
+    });
+
+    if (options.interactiveKindForTesting) {
+        this.wrapper.setAttribute(
+            "data-interactive-kind-for-testing",
+            options.interactiveKindForTesting,
+        );
+    }
+
+    // Add to appropriate graphie layer
+    if (options.mouselayer) {
+        // Disable browser handling of all panning and zooming gestures on the
+        // movable wrapper so that when moved the browser does not scroll page
+        this.wrapper.style.touchAction = "none";
+
+        this.graphie.addToMouseLayerWrapper(this.wrapper);
+    } else {
+        this.graphie.addToVisibleLayerWrapper(this.wrapper);
+    }
+
+    if (options.shadow) {
+        const filter = "drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5))";
+        const wrapper = this.wrapper;
+        wrapper.style.webkitFilter = filter;
+        wrapper.style.filter = filter;
+
+        this.moveTo = function (point) {
+            const delta = kvector.subtract(
+                this.graphie.scalePoint(point),
+                this.graphie.scalePoint(this.initialPoint),
+            );
+            const do3dTransform = InteractiveUtil.getCanUse3dTransform();
+            const transform =
+                "translateX(" +
+                Math.round(delta[0]) +
+                "px) " +
+                "translateY(" +
+                Math.round(delta[1]) +
+                "px)" +
+                (do3dTransform ? " translateZ(0)" : "");
+            this.transform(transform);
+        };
+    }
+
+    if (options.disableMouseEventsOnWrapper) {
+        this.wrapper.style.pointerEvents = "none";
+        this.visibleShape.node.style.pointerEvents = "auto";
+    }
+};
+
+_.extend(WrappedEllipse.prototype, WrappedDefaults);
+
+export default WrappedEllipse;

package/src/interactive2/wrapped-line.js

@@ -0,0 +1,109 @@
+// @flow
+import {point as kpoint, vector as kvector} from "@khanacademy/kmath";
+import _ from "underscore";
+
+import KhanMath from "../util/math.js";
+
+import InteractiveUtil from "./interactive-util.js";
+import WrappedDefaults from "./wrapped-defaults.js";
+
+import type {Coord} from "./types.js";
+
+const DEFAULT_OPTIONS = {
+    thickness: 2,
+    mouselayer: false,
+};
+
+const WrappedLine = function (
+    graphie: $FlowFixMe,
+    start: Coord,
+    end: Coord,
+    options: $FlowFixMe,
+) {
+    options = _.extend({}, DEFAULT_OPTIONS, options);
+
+    // Always make the line as large as possible and horizontal; this
+    // simplifies a lot of the transforms, e.g., we can rotate by exactly the
+    // angle of the argument points in `moveTo`.
+    const initialStart = [graphie.range[0][0], 0];
+    const initialEnd = [graphie.range[0][1], 0];
+
+    // Add `wrapper` and `visibleShape`
+    _.extend(
+        this,
+        graphie.fixedLine(initialStart, initialEnd, options.thickness),
+    );
+
+    if (options.interactiveKindForTesting) {
+        this.wrapper.setAttribute(
+            "data-interactive-kind-for-testing",
+            options.interactiveKindForTesting,
+        );
+    }
+
+    this.visibleShape.attr(options.normalStyle);
+
+    // Save properties for computing transformations
+    _.extend(this, {
+        graphie: graphie,
+        initialPoint: graphie.scalePoint(initialStart),
+        initialLength: kpoint.distanceToPoint(
+            graphie.scalePoint(initialStart),
+            graphie.scalePoint(initialEnd),
+        ),
+    });
+
+    // Add to appropriate graphie layer
+    if (options.mouselayer) {
+        // Disable browser handling of all panning and zooming gestures on the
+        // movable wrapper so that when moved the browser does not scroll page
+        this.wrapper.style.touchAction = "none";
+
+        this.graphie.addToMouseLayerWrapper(this.wrapper);
+    } else {
+        this.graphie.addToVisibleLayerWrapper(this.wrapper);
+    }
+
+    // Move to argument points
+    this.moveTo(start, end);
+};
+
+_.extend(WrappedLine.prototype, WrappedDefaults, {
+    getMouseTarget: function () {
+        return this.wrapper;
+    },
+
+    moveTo: function (start, end) {
+        const scaledStart = this.graphie.scalePoint(start);
+        const scaledEnd = this.graphie.scalePoint(end);
+
+        // Compute transformation parameters
+        const polarDiff = kvector.polarDegFromCart(
+            kvector.subtract(scaledEnd, scaledStart),
+        );
+        const lineLength = polarDiff[0];
+        const angle = KhanMath.bound(polarDiff[1]);
+        const delta = kvector.subtract(scaledStart, this.initialPoint);
+        const scale = KhanMath.bound(lineLength / this.initialLength);
+
+        // Construct and apply transformation string
+        const do3dTransform = InteractiveUtil.getCanUse3dTransform();
+        const transformation =
+            "translateX(" +
+            delta[0] +
+            "px) " +
+            "translateY(" +
+            delta[1] +
+            "px) " +
+            (do3dTransform ? " translateZ(0)" : "") +
+            "rotate(" +
+            angle +
+            "deg) " +
+            "scaleX(" +
+            scale +
+            ") scaleY(1)";
+        this.transform(transformation);
+    },
+});
+
+export default WrappedLine;

package/src/interactive2/wrapped-path.js

@@ -0,0 +1,47 @@
+// @flow
+import _ from "underscore";
+
+import WrappedDefaults from "./wrapped-defaults.js";
+
+import type {Coord} from "./types.js";
+
+const DEFAULT_OPTIONS = {
+    center: null, // gets ignored in `graphie.fixedPath` if `null`
+    createPath: null, // gets defaulted in `graphie.fixedPath` if `null`
+    mouselayer: false,
+};
+
+const WrappedPath = function (
+    graphie: $FlowFixMe,
+    points: $ReadOnlyArray<Coord>,
+    options: $FlowFixMe,
+) {
+    options = _.extend({}, DEFAULT_OPTIONS, options);
+
+    // Add `wrapper` and `visibleShape`
+    _.extend(
+        this,
+        graphie.fixedPath(points, options.center, options.createPath),
+    );
+
+    // Add remaining properties
+    _.extend(this, {
+        graphie: graphie,
+        initialPoint: graphie.scalePoint(_.head(points)),
+    });
+
+    // Add to appropriate graphie layer
+    if (options.mouselayer) {
+        // Disable browser handling of all panning and zooming gestures on the
+        // movable wrapper so that when moved the browser does not scroll page
+        this.wrapper.style.touchAction = "none";
+
+        this.graphie.addToMouseLayerWrapper(this.wrapper);
+    } else {
+        this.graphie.addToVisibleLayerWrapper(this.wrapper);
+    }
+};
+
+_.extend(WrappedPath.prototype, WrappedDefaults);
+
+export default WrappedPath;