@khanacademy/perseus 19.1.4 → 19.1.6

package/src/components/graphie-classes.ts

@@ -1,153 +0,0 @@
-/* eslint-disable @babel/no-invalid-this */
-import _ from "underscore";
-
-import {Errors} from "../logging/log";
-import {PerseusError} from "../perseus-error";
-import Util from "../util";
-
-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: any) {
-    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-    _.extend(this, descriptor);
-}
-
-const abstractMethod = function () {
-    throw new PerseusError(
-        "Abstract method! Must be implemented by Graphie Movable" +
-            // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-            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: any, childrenArray: any) {
-    // 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: any): any {
-    const GraphieClass = function (props: any) {
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        if (!(this instanceof GraphieClass)) {
-            throw new PerseusError(
-                "Use createElement or JSX with graphie movables",
-                Errors.NotAllowed,
-            );
-        }
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        this.props = rewriteProps(props, props.children || []);
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        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;
-
-    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: any): any {
-    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 () {
-            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
-            nestedMap(this._elements, (elem) => {
-                if (elem) {
-                    elem.remove();
-                }
-            });
-            this._elements = null;
-            this._prevProps = null;
-        },
-
-        toFront: function () {
-            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
-            nestedMap(this._elements, (elem) => {
-                if (_.isFunction(elem.toFront)) {
-                    elem.toFront();
-                }
-            });
-        },
-    });
-};
-
-export default {
-    GraphieMovable: GraphieMovable,
-    createClass: createClass,
-    createSimpleClass: createSimpleClass,
-};

package/src/components/graphie-movables.ts

@@ -1,338 +0,0 @@
-import _ from "underscore";
-
-import {getDependencies} from "../dependencies";
-import Interactive2 from "../interactive2";
-import KhanColors from "../util/colors";
-
-import GraphieClasses from "./graphie-classes";
-
-const MovablePoint: any = 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 */
-
-            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: any = 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: any = 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: any = 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: any = 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: any = 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: any = GraphieClasses.createSimpleClass((graphie, props) => {
-    return graphie.plot(props.fn, props.range, props.style);
-});
-
-const PlotParametric: any = GraphieClasses.createSimpleClass(
-    (graphie, props) => {
-        return graphie.plotParametric(props.fn, props.range, props.style);
-    },
-);
-
-const Point: any = 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: any = 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: any = 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: any = GraphieClasses.createSimpleClass((graphie, props) => {
-    return graphie.circle(props.center, props.radius, props.style);
-});
-
-const Rect: any = 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,
-};