@khanacademy/perseus 0.0.1 → 0.2.1

package/src/components/graphie-classes.jsx

@@ -0,0 +1,148 @@
+/* eslint-disable @babel/no-invalid-this */
+// @flow
+import _ from "underscore";
+
+import {Errors} from "../logging/log.js";
+import {PerseusError} from "../perseus-error.js";
+import Util from "../util.js";
+
+const nestedMap = Util.nestedMap;
+const deepEq = Util.deepEq;
+
+/**
+ * A base class for all Graphie Movables
+ *
+ * Used for checking that all Graphie children are, in fact,
+ * GraphieMovables
+ */
+function GraphieMovable(descriptor: $FlowFixMe) {
+    _.extend(this, descriptor);
+}
+
+const abstractMethod = function () {
+    throw new PerseusError(
+        "Abstract method! Must be implemented by Graphie Movable" +
+            this.constructor.displayName,
+        Errors.NotAllowed,
+    );
+};
+
+_.extend(GraphieMovable.prototype, {
+    movableProps: [],
+    add: abstractMethod,
+    modify: abstractMethod,
+    remove: abstractMethod,
+    toFront: function () {
+        /* no op */
+    },
+    componentDidMount: function () {
+        /* no op */
+        // Note: this method is here to trick react-hot-loader into thinking
+        // components built from extending GraphieMovable are recognized as
+        // class base React components so that they get wrapped correctly.
+        // See https://github.com/gaearon/react-hot-loader/blob/master/src/internal/reactUtils.js#L14-L26
+        // for details of how react-hot-loader determines whether something is
+        // a React class (component).
+    },
+});
+
+/**
+ * returns cloned props modified with `children: childrenArray`
+ */
+const rewriteProps = function (props, childrenArray) {
+    // Clone the props and add `children:`
+    // childrenArray is always an array here because this is only called
+    // from createClass, which initializes childrenArray as _.rest(arguments)
+    return _.extend({}, props, {
+        children: _.filter(_.flatten(childrenArray), _.identity),
+    });
+};
+
+/**
+ * Create a custom GraphieMovable class
+ */
+const createClass = function (spec: $FlowFixMe): $FlowFixMe {
+    const GraphieClass = function (props) {
+        if (!(this instanceof GraphieClass)) {
+            throw new PerseusError(
+                "Use createElement or JSX with graphie movables",
+                Errors.NotAllowed,
+            );
+        }
+        this.props = rewriteProps(props, props.children || []);
+        return this;
+    };
+
+    spec.displayName = spec.displayName || _.uniqueId("GraphieClass");
+
+    // Add the displayName to the constructor for compatibility with
+    // React's myDescriptor.constructor.displayName
+    GraphieClass.displayName = spec.displayName;
+
+    // $FlowFixMe[invalid-constructor]
+    GraphieClass.prototype = new GraphieMovable(spec);
+    GraphieClass.prototype.constructor = GraphieClass;
+
+    return GraphieClass;
+};
+
+/**
+ * Create a GraphieMovable class from a function that describes
+ * how to add said class to a graphie, and returns an array of
+ * `.remove()`able elements to be used when a remove() or
+ * modify() is called.
+ *
+ * This convenience method creates an inefficient class, although
+ * it does check for a difference in this.props and prevProps before
+ * removing and re-adding itself.
+ *
+ * The primary benefit of this is being able to very easily create
+ * a wrapper for old graphie code to make it interface with <Graphie>
+ *
+ * Commonly used elements should use the fully-fledged createClass
+ * and implement an efficient modify() operation.
+ */
+const createSimpleClass = function (addFunction: $FlowFixMe): $FlowFixMe {
+    return createClass({
+        displayName: addFunction.name || _.uniqueId("GraphieSimpleClass"),
+        movableProps: ["children"],
+
+        add: function (graphie) {
+            this._elements = addFunction(graphie, this.props);
+            this._prevProps = this.props;
+        },
+
+        modify: function (graphie) {
+            if (!deepEq(this.props, this._prevProps)) {
+                this.remove();
+                this.add(graphie);
+                this._prevProps = this.props;
+                return "reordered";
+            }
+        },
+
+        remove: function () {
+            nestedMap(this._elements, (elem) => {
+                if (elem) {
+                    elem.remove();
+                }
+            });
+            this._elements = null;
+            this._prevProps = null;
+        },
+
+        toFront: function () {
+            nestedMap(this._elements, (elem) => {
+                if (_.isFunction(elem.toFront)) {
+                    elem.toFront();
+                }
+            });
+        },
+    });
+};
+
+export default {
+    GraphieMovable: GraphieMovable,
+    createClass: createClass,
+    createSimpleClass: createSimpleClass,
+};

package/src/components/graphie-movables.jsx

@@ -0,0 +1,342 @@
+// @flow
+import _ from "underscore";
+
+import {getDependencies} from "../dependencies.js";
+import Interactive2 from "../interactive2.js";
+import KhanColors from "../util/colors.js";
+
+import GraphieClasses from "./graphie-classes.jsx";
+
+const MovablePoint: $FlowFixMe = GraphieClasses.createClass({
+    displayName: "MovablePoint",
+
+    movableProps: ["children"],
+
+    _getProps: function () {
+        if (this.props.isMobile) {
+            const isMobile = this.props.isMobile;
+
+            // TODO(kevinb) precompute commonStyle and commonMobileStyle
+            const commonStyle = isMobile
+                ? {
+                      stroke: "#ffffff",
+                      "stroke-width": 3,
+                      fill: KhanColors.INTERACTIVE,
+                  }
+                : {
+                      stroke: KhanColors.INTERACTIVE,
+                      fill: KhanColors.INTERACTIVE,
+                  };
+
+            // TODO(kevinb) precompute normalStyle and normalMobileStyle
+            const normalStyle = isMobile
+                ? Object.assign(
+                      commonStyle,
+                      this.props.mobileStyleOverride || {},
+                  )
+                : Object.assign(commonStyle, this.props.normalStyle);
+
+            // TODO(kevinb) precompute highlightStyle and highlightMobileStyle
+            const highlightStyle = isMobile
+                ? {
+                      ...commonStyle,
+                      "stroke-width": 0,
+                      scale: 0.75,
+                  }
+                : this.props.highlightStyle;
+            /* eslint-enable indent */
+
+            // $FlowFixMe[prop-missing]
+            const addedProps = Object.assign(
+                {
+                    normalStyle: normalStyle,
+                    highlightStyle: highlightStyle,
+                    shadow: isMobile,
+                    tooltip: isMobile && this.props.showTooltips,
+                },
+                isMobile ? {pointSize: 7} : {},
+            );
+
+            return Object.assign(this.props, addedProps);
+        }
+        return this.props;
+    },
+
+    add: function (graphie) {
+        this.point = Interactive2.addMovablePoint(graphie, this._getProps());
+    },
+
+    modify: function () {
+        this.point.modify(this._getProps());
+    },
+
+    remove: function () {
+        this.point.remove();
+    },
+
+    toFront: function () {
+        this.point.toFront();
+    },
+
+    grab: function (coord) {
+        this.point.grab(coord);
+    },
+});
+
+// Include helper methods, such as MovablePoint.constrain.snap()
+_.extend(MovablePoint, Interactive2.MovablePoint);
+
+const MovableLine: $FlowFixMe = GraphieClasses.createClass({
+    displayName: "MovableLine",
+
+    movableProps: ["children"],
+
+    add: function (graphie) {
+        // Add MovablePoint children
+        const points = _.pluck(this.props.children, "point");
+        const props = _.extend({}, this.props, {
+            points: points,
+        });
+        this.line = Interactive2.addMovableLine(graphie, props);
+    },
+
+    modify: function () {
+        // Add MovablePoint children
+        const points = _.pluck(this.props.children, "point");
+        const props = _.extend({}, this.props, {
+            points: points,
+        });
+        this.line.modify(props);
+    },
+
+    remove: function () {
+        this.line.remove();
+    },
+
+    toFront: function () {
+        this.line.toFront();
+    },
+});
+
+// Include helper methods, such as MovableLine.constrain.snap()
+_.extend(MovableLine, Interactive2.MovableLine);
+
+const Label: $FlowFixMe = GraphieClasses.createSimpleClass((graphie, props) => {
+    let coord = props.coord;
+    if (props.unscaled) {
+        coord = graphie.unscalePoint(coord);
+    }
+    let elem = null;
+    // If the label is rendered for a locale other than "en", push the label
+    // element to an array. This array is used to lookup the label element
+    // and processed with jipt('just in place translation', crowdin specific
+    // program) to replace the passed in crowdin string with the translated
+    // string. For "en" locale, the jipt processing is skipped.
+    if (getDependencies().JIPT.useJIPT) {
+        elem = graphie.label(
+            coord,
+            props.text,
+            props.direction,
+            false,
+            props.style,
+        );
+
+        getDependencies().graphieMovablesJiptLabels.addLabel(elem, props.tex);
+    } else {
+        elem = graphie.label(
+            coord,
+            props.text,
+            props.direction,
+            props.tex,
+            props.style,
+        );
+    }
+    return elem;
+});
+
+const Line: $FlowFixMe = GraphieClasses.createClass({
+    displayName: "Line",
+
+    movableProps: ["children"],
+
+    add: function (graphie) {
+        const props = this.props;
+        this.graphie = graphie;
+        this.line = this.graphie.line(props.start, props.end, props.style);
+    },
+
+    modify: function () {
+        const props = this.props;
+        const path = this.graphie.svgPath([props.start, props.end]);
+        this.line.attr(_.extend({}, props.style, {path: path}));
+    },
+
+    remove: function () {
+        this.line.remove();
+    },
+
+    toFront: function () {
+        this.line.toFront();
+    },
+});
+
+const Parabola: $FlowFixMe = GraphieClasses.createClass({
+    displayName: "Parabola",
+
+    movableProps: ["children"],
+
+    add: function (graphie) {
+        const props = this.props;
+        this.graphie = graphie;
+        this.parabola = this.graphie.parabola(
+            props.a,
+            props.b,
+            props.c,
+            props.style,
+        );
+    },
+
+    modify: function () {
+        const props = this.props;
+        const path = this.graphie.svgParabolaPath(props.a, props.b, props.c);
+        this.parabola.attr(_.extend({}, props.style, {path: path}));
+    },
+
+    remove: function () {
+        this.parabola.remove();
+    },
+
+    toFront: function () {
+        this.parabola.toFront();
+    },
+});
+
+const Sinusoid: $FlowFixMe = GraphieClasses.createClass({
+    displayName: "Sinusoid",
+
+    movableProps: ["children"],
+
+    add: function (graphie) {
+        const props = this.props;
+        this.graphie = graphie;
+        this.sinusoid = this.graphie.sinusoid(
+            props.a,
+            props.b,
+            props.c,
+            props.d,
+            props.style,
+        );
+    },
+
+    modify: function () {
+        const props = this.props;
+        const path = this.graphie.svgSinusoidPath(
+            props.a,
+            props.b,
+            props.c,
+            props.d,
+        );
+        this.sinusoid.attr(_.extend({}, props.style, {path: path}));
+    },
+
+    remove: function () {
+        this.sinusoid.remove();
+    },
+
+    toFront: function () {
+        this.sinusoid.toFront();
+    },
+});
+
+const Plot: $FlowFixMe = GraphieClasses.createSimpleClass((graphie, props) => {
+    return graphie.plot(props.fn, props.range, props.style);
+});
+
+const PlotParametric: $FlowFixMe = GraphieClasses.createSimpleClass(
+    (graphie, props) => {
+        return graphie.plotParametric(props.fn, props.range, props.style);
+    },
+);
+
+const Point: $FlowFixMe = GraphieClasses.createSimpleClass((graphie, props) => {
+    return graphie.ellipse(props.coord, graphie.unscaleVector([4, 4]), {
+        fill: props.color || KhanColors.BLACK,
+        stroke: props.color || KhanColors.BLACK,
+    });
+});
+
+const Path: $FlowFixMe = GraphieClasses.createClass({
+    displayName: "Path",
+
+    movableProps: ["children"],
+
+    add: function (graphie) {
+        const props = this.props;
+        this.graphie = graphie;
+        this.path = this.graphie.path(props.coords, props.style);
+    },
+
+    modify: function () {
+        const props = this.props;
+        const path = this.graphie.svgPath(props.coords);
+        this.path.attr({path: path});
+    },
+
+    remove: function () {
+        this.path.remove();
+    },
+
+    toFront: function () {
+        this.path.toFront();
+    },
+});
+
+const Arc: $FlowFixMe = GraphieClasses.createSimpleClass((graphie, props) => {
+    let center = props.center;
+    let radius = props.radius;
+    if (props.unscaled) {
+        center = graphie.unscalePoint(center);
+        radius = graphie.unscaleVector(radius);
+    }
+
+    return graphie.arc(
+        center,
+        radius,
+        props.startAngle,
+        props.endAngle,
+        props.sector,
+        props.style,
+    );
+});
+
+const Circle: $FlowFixMe = GraphieClasses.createSimpleClass(
+    (graphie, props) => {
+        return graphie.circle(props.center, props.radius, props.style);
+    },
+);
+
+const Rect: $FlowFixMe = GraphieClasses.createSimpleClass((graphie, props) => {
+    return graphie.rect(
+        props.x,
+        props.y,
+        props.width,
+        props.height,
+        props.style,
+    );
+});
+
+export default {
+    Arc: Arc,
+    Circle: Circle,
+    Label: Label,
+    Line: Line,
+    MovableLine: MovableLine,
+    MovablePoint: MovablePoint,
+    Parabola: Parabola,
+    Path: Path,
+    Plot: Plot,
+    PlotParametric: PlotParametric,
+    Point: Point,
+    Sinusoid: Sinusoid,
+    Rect: Rect,
+};