@khanacademy/perseus-editor 0.0.1 → 0.1.0

package/src/widgets/interactive-graph-editor.jsx

@@ -0,0 +1,320 @@
+/* eslint-disable react/no-unsafe, react/sort-comp */
+// @flow
+import {
+    components,
+    interactiveSizes,
+    InteractiveGraphWidget,
+    SizingUtils,
+    Util,
+} from "@khanacademy/perseus";
+import createReactClass from "create-react-class";
+import * as React from "react";
+import _ from "underscore";
+
+import GraphSettings from "../components/graph-settings.jsx";
+
+const {InfoTip} = components;
+const {containerSizeClass, getInteractiveBoxFromSizeClass} = SizingUtils;
+const DeprecationMixin = Util.DeprecationMixin;
+const InteractiveGraph = InteractiveGraphWidget.widget;
+
+type InteractiveGraphProps = React.ElementConfig<typeof InteractiveGraph>;
+
+const defaultBackgroundImage = {
+    url: null,
+};
+
+const deprecatedProps = {
+    showGraph: function (props) {
+        return {markings: props.showGraph ? "graph" : "none"};
+    },
+};
+
+const InteractiveGraphEditor: $FlowFixMe = createReactClass({
+    displayName: "InteractiveGraphEditor",
+    className: "perseus-widget-interactive-graph",
+
+    statics: {
+        widgetName: "interactive-graph",
+    },
+
+    getDefaultProps: function () {
+        return {
+            labels: ["x", "y"],
+            range: [
+                [-10, 10],
+                [-10, 10],
+            ],
+            step: [1, 1],
+            valid: true,
+            backgroundImage: defaultBackgroundImage,
+            markings: "graph",
+            showProtractor: false,
+            showRuler: false,
+            showTooltips: false,
+            rulerLabel: "",
+            rulerTicks: 10,
+            correct: {
+                type: "linear",
+                coords: null,
+            },
+        };
+    },
+
+    // TODO(jack): Use versioning instead of DeprecationMixin
+    deprecatedProps: deprecatedProps,
+
+    // TODO(jangmi, CP-3288): Remove usage of `UNSAFE_componentWillMount`
+    UNSAFE_componentWillMount() {
+        // $FlowFixMe[object-this-reference]
+        DeprecationMixin.UNSAFE_componentWillMount.call(this);
+    },
+
+    render: function () {
+        let graph;
+        let equationString;
+
+        const gridStep =
+            this.props.gridStep ||
+            Util.getGridStep(
+                this.props.range,
+                this.props.step,
+                interactiveSizes.defaultBoxSize,
+            );
+        const snapStep =
+            this.props.snapStep || Util.snapStepFromGridStep(gridStep);
+
+        const sizeClass = containerSizeClass.SMALL;
+        if (this.props.valid === true) {
+            // TODO(aria): send these down all at once
+            const graphProps = {
+                ref: "graph",
+                box: this.props.box,
+                range: this.props.range,
+                labels: this.props.labels,
+                step: this.props.step,
+                gridStep: gridStep,
+                snapStep: snapStep,
+                graph: this.props.correct,
+                backgroundImage: this.props.backgroundImage,
+                markings: this.props.markings,
+                showProtractor: this.props.showProtractor,
+                showRuler: this.props.showRuler,
+                rulerLabel: this.props.rulerLabel,
+                rulerTicks: this.props.rulerTicks,
+                trackInteraction: function () {},
+                onChange: (newProps: InteractiveGraphProps) => {
+                    let correct = this.props.correct;
+                    // $FlowFixMe[incompatible-use]
+                    if (correct.type === newProps.graph.type) {
+                        correct = _.extend({}, correct, newProps.graph);
+                    } else {
+                        // Clear options from previous graph
+                        correct = newProps.graph;
+                    }
+                    this.props.onChange({correct: correct});
+                },
+            };
+            graph = (
+                // There are a bunch of props that renderer.jsx passes to widgets via
+                // getWidgetProps() and widget-container.jsx that the editors don't
+                // bother passing.
+                // $FlowFixMe[prop-missing]
+                <InteractiveGraph
+                    {...graphProps}
+                    containerSizeClass={sizeClass}
+                    apiOptions={{
+                        ...this.props.apiOptions,
+                        isMobile: false,
+                    }}
+                />
+            );
+            // TODO(kevinb): Update getEquationString to only accept the data it actually
+            // needs to compute the equation string.
+            // $FlowFixMe[prop-missing]
+            equationString = InteractiveGraph.getEquationString(graphProps);
+        } else {
+            graph = <div className="perseus-error">{this.props.valid}</div>;
+        }
+
+        return (
+            <div className="perseus-widget-interactive-graph">
+                <div>
+                    Correct answer{" "}
+                    <InfoTip>
+                        <p>
+                            Graph the correct answer in the graph below and
+                            ensure the equation or point coordinates displayed
+                            represent the correct answer.
+                        </p>
+                    </InfoTip>{" "}
+                    : {equationString}
+                </div>
+
+                <GraphSettings
+                    box={getInteractiveBoxFromSizeClass(sizeClass)}
+                    range={this.props.range}
+                    labels={this.props.labels}
+                    step={this.props.step}
+                    gridStep={gridStep}
+                    snapStep={snapStep}
+                    valid={this.props.valid}
+                    backgroundImage={this.props.backgroundImage}
+                    markings={this.props.markings}
+                    showProtractor={this.props.showProtractor}
+                    showRuler={this.props.showRuler}
+                    showTooltips={this.props.showTooltips}
+                    rulerLabel={this.props.rulerLabel}
+                    rulerTicks={this.props.rulerTicks}
+                    onChange={this.props.onChange}
+                />
+
+                {this.props.correct.type === "polygon" && (
+                    <div className="type-settings">
+                        <label>
+                            {" "}
+                            Student answer must{" "}
+                            <select
+                                value={this.props.correct.match}
+                                onChange={this.changeMatchType}
+                            >
+                                <option value="exact">match exactly</option>
+                                <option value="congruent">be congruent</option>
+                                <option value="approx">
+                                    be approximately congruent
+                                </option>
+                                <option value="similar">be similar</option>
+                            </select>
+                        </label>
+                        <InfoTip>
+                            <ul>
+                                <li>
+                                    <p>
+                                        <b>Match Exactly:</b> Match exactly in
+                                        size, orientation, and location on the
+                                        grid even if it is not shown in the
+                                        background.
+                                    </p>
+                                </li>
+                                <li>
+                                    <p>
+                                        <b>Be Congruent:</b> Be congruent in
+                                        size and shape, but can be located
+                                        anywhere on the grid.
+                                    </p>
+                                </li>
+                                <li>
+                                    <p>
+                                        <b>Be Approximately Congruent:</b> Be
+                                        exactly similar, and congruent in size
+                                        and shape to within 0.1 units, but can
+                                        be located anywhere on the grid.{" "}
+                                        <em>
+                                            Use this with snapping to angle
+                                            measure.
+                                        </em>
+                                    </p>
+                                </li>
+                                <li>
+                                    <p>
+                                        <b>Be Similar:</b> Be similar with
+                                        matching interior angles, and side
+                                        measures that are matching or a multiple
+                                        of the correct side measures. The figure
+                                        can be located anywhere on the grid.
+                                    </p>
+                                </li>
+                            </ul>
+                        </InfoTip>
+                    </div>
+                )}
+                {this.props.correct.type === "angle" && (
+                    <div className="type-settings">
+                        <div>
+                            <label>
+                                {" "}
+                                Student answer must{" "}
+                                <select
+                                    value={this.props.correct.match}
+                                    onChange={this.changeMatchType}
+                                >
+                                    <option value="exact">match exactly</option>
+                                    <option value="congruent">
+                                        be congruent
+                                    </option>
+                                </select>
+                            </label>
+                            <InfoTip>
+                                <p>
+                                    Congruency requires only that the angle
+                                    measures are the same. An exact match
+                                    implies congruency, but also requires that
+                                    the angles have the same orientation and
+                                    that the vertices are in the same position.
+                                </p>
+                            </InfoTip>
+                        </div>
+                    </div>
+                )}
+                {graph}
+            </div>
+        );
+    },
+
+    changeMatchType: function (e) {
+        const correct = _.extend({}, this.props.correct, {
+            match: e.target.value,
+        });
+        this.props.onChange({correct: correct});
+    },
+
+    serialize: function () {
+        const json = _.pick(
+            this.props,
+            "step",
+            "backgroundImage",
+            "markings",
+            "labels",
+            "showProtractor",
+            "showRuler",
+            "showTooltips",
+            "rulerLabel",
+            "rulerTicks",
+            "range",
+            "gridStep",
+            "snapStep",
+        );
+
+        // eslint-disable-next-line react/no-string-refs
+        const graph = this.refs.graph;
+        if (graph) {
+            const correct = graph && graph.getUserInput();
+            _.extend(json, {
+                graph: {type: correct.type},
+                correct: correct,
+            });
+
+            _.each(
+                [
+                    "allowReflexAngles",
+                    "angleOffsetDeg",
+                    "numPoints",
+                    "numSides",
+                    "numSegments",
+                    "showAngles",
+                    "showSides",
+                    "snapTo",
+                    "snapDegrees",
+                ],
+                function (key) {
+                    if (_.has(correct, key)) {
+                        json.graph[key] = correct[key];
+                    }
+                },
+            );
+        }
+        return json;
+    },
+});
+
+export default InteractiveGraphEditor;

package/src/widgets/label-image/__stories__/answer-choices.stories.jsx

@@ -0,0 +1,81 @@
+// @flow
+import {action} from "@storybook/addon-actions";
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+
+import AnswerChoices from "../answer-choices.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Editor/Widgets/Label Image/Answer Choices",
+}: Story);
+
+const styles = StyleSheet.create({
+    wrapper: {
+        // The maximum width of a widget in the editor.
+        width: 338,
+    },
+});
+
+const Wrapper = (props: $FlowFixMe) => {
+    return (
+        <div className={css(styles.wrapper)}>
+            <AnswerChoices
+                {...props}
+                onChange={(...args) => {
+                    action("onChange")(...args);
+                    props.onChange(...args);
+                }}
+            />
+        </div>
+    );
+};
+
+class WithState extends React.Component<
+    {||},
+    {|choices: $ReadOnlyArray<string>|},
+> {
+    state = {
+        choices: [],
+    };
+
+    render(): React.Node {
+        const {choices} = this.state;
+
+        return (
+            <Wrapper
+                choices={choices}
+                onChange={(choices) => this.setState({choices})}
+            />
+        );
+    }
+}
+
+export const EmptyNonInteractive = (args: StoryArgs): React.Node => {
+    const props = {choices: [], onChange: (...args) => {}};
+    return <Wrapper {...props} />;
+};
+
+export const FilledNonInteractive = (args: StoryArgs): React.Node => {
+    const props = {
+        choices: [
+            "Lamborghini",
+            "BMW",
+            "Volkswagen",
+            "Fiat",
+            "Porsche",
+            "Ferrari",
+        ],
+        onChange: (...args) => {},
+    };
+    return <Wrapper {...props} />;
+};
+
+export const Interactive = (args: StoryArgs): React.Node => {
+    return <WithState />;
+};

package/src/widgets/label-image/__stories__/behavior.stories.jsx

@@ -0,0 +1,32 @@
+// @flow
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import Behavior from "../behavior.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Editor/Widgets/Label Image/Behavior",
+}: Story);
+
+export const Default = (args: StoryArgs): React.Node => {
+    const [state, setState] = React.useState({
+        multipleAnswers: false,
+        hideChoicesFromInstructions: false,
+    });
+
+    const props = {
+        multipleAnswers: state.multipleAnswers,
+        hideChoicesFromInstructions: state.hideChoicesFromInstructions,
+        onChange: (newState) => {
+            action("onChange")(newState);
+            setState({...state, ...newState});
+        },
+    };
+    return <Behavior {...props} />;
+};

package/src/widgets/label-image/__stories__/marker.stories.jsx

@@ -0,0 +1,76 @@
+// @flow
+import {action} from "@storybook/addon-actions";
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+
+import Marker from "../marker.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Editor/Widgets/Label Image/Marker",
+}: Story);
+
+const styles = StyleSheet.create({
+    wrapper: {
+        // Push the component down as the popover that displays the choices
+        // doesn't properly pop over everything.
+        marginTop: 150,
+
+        position: "relative",
+
+        width: 32,
+        height: 32,
+    },
+});
+
+const Wrapper = (props) => (
+    <div className={css(styles.wrapper)}>
+        <Marker {...props} />
+    </div>
+);
+
+export const Empty = (args: StoryArgs): React.Node => {
+    const props = {
+        answers: [],
+        choices: [],
+        label: "",
+        onChange: (...args) => {
+            action("onChange")(...args);
+        },
+        onRemove: (...args) => {
+            action("onRemove")(...args);
+        },
+        x: 50,
+        y: 50,
+    };
+    return <Wrapper {...props} />;
+};
+
+export const WithAnswers = (args: StoryArgs): React.Node => {
+    const props = {
+        answers: ["BMW", "Ferrari"],
+        choices: [
+            "Lamborghini",
+            "BMW",
+            "Volkswagen",
+            "Fiat",
+            "Porsche",
+            "Ferrari",
+        ],
+        label: "Automotive",
+        onChange: (...args) => {
+            action("onChange")(...args);
+        },
+        onRemove: (...args) => {
+            action("onRemove")(...args);
+        },
+        x: 50,
+        y: 50,
+    };
+    return <Wrapper {...props} />;
+};

package/src/widgets/label-image/__stories__/question-markers.stories.jsx

@@ -0,0 +1,106 @@
+// @flow
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+
+import QuestionMarkers from "../question-markers.jsx";
+
+import type {MarkerType} from "@khanacademy/perseus";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Editor/Widgets/Label Image/Question Markers",
+}: Story);
+
+const styles = StyleSheet.create({
+    wrapper: {
+        // The maximum width of a widget in the editor.
+        width: 338,
+    },
+});
+
+const Wrapper = (props) => (
+    <div className={css(styles.wrapper)}>
+        <QuestionMarkers {...props} />
+    </div>
+);
+
+class WithState extends React.Component<
+    {||},
+    {|markers: $ReadOnlyArray<MarkerType>|},
+> {
+    state = {
+        markers: [
+            {
+                answers: [],
+                label: "",
+                x: 50,
+                y: 50,
+            },
+        ],
+    };
+
+    render(): React.Node {
+        const {markers} = this.state;
+
+        return (
+            <div className={css(styles.wrapper)}>
+                <QuestionMarkers
+                    choices={[
+                        "Lamborghini",
+                        "BMW",
+                        "Volkswagen",
+                        "Fiat",
+                        "Porsche",
+                        "Ferrari",
+                    ]}
+                    imageUrl="https://ka-perseus-images.s3.amazonaws.com/2ee5fc32e35c5178373b39fd304b325b2994c913.png"
+                    imageWidth={1280}
+                    imageHeight={1024}
+                    markers={markers}
+                    onChange={(markers) => this.setState({markers})}
+                />
+            </div>
+        );
+    }
+}
+
+export const Empty = (args: StoryArgs): React.Node => {
+    const props = {
+        choices: [],
+        imageUrl: "",
+        imageWidth: 0,
+        imageHeight: 0,
+        markers: [],
+        onChange: () => {},
+    };
+    return <Wrapper {...props} />;
+};
+
+export const Filled = (args: StoryArgs): React.Node => {
+    const props = {
+        choices: [],
+        imageUrl:
+            "https://ka-perseus-images.s3.amazonaws.com/2ee5fc32e35c5178373b39fd304b325b2994c913.png",
+        imageWidth: 1280,
+        imageHeight: 1024,
+        markers: [
+            {
+                answers: [],
+                label: "",
+                x: 50,
+                y: 50,
+            },
+        ],
+        onChange: () => {},
+    };
+    return <Wrapper {...props} />;
+};
+
+export const Interactive = (args: StoryArgs): React.Node => {
+    return <WithState />;
+};

package/src/widgets/label-image/__stories__/select-image.stories.jsx

@@ -0,0 +1,60 @@
+// @flow
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+
+import SelectImage from "../select-image.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Editor/Widgets/Label Image/Select Image",
+}: Story);
+
+const styles = StyleSheet.create({
+    wrapper: {
+        // The maximum width of a widget in the editor.
+        width: 338,
+    },
+});
+
+const Wrapper = (props) => (
+    <div className={css(styles.wrapper)}>
+        <SelectImage {...props} />
+    </div>
+);
+
+const WithState = () => {
+    const [url, setUrl] = React.useState("");
+
+    return (
+        <div className={css(styles.wrapper)}>
+            <SelectImage onChange={(url) => setUrl(url)} url={url} />
+        </div>
+    );
+};
+
+export const Empty = (args: StoryArgs): React.Node => {
+    const props = {
+        url: "",
+        onChange: () => {},
+    };
+
+    return <Wrapper {...props} />;
+};
+
+export const Filled = (args: StoryArgs): React.Node => {
+    const props = {
+        url: "https://ka-perseus-images.s3.amazonaws.com/2ee5fc32e35c5178373b39fd304b325b2994c913.png",
+        onChange: () => {},
+    };
+
+    return <Wrapper {...props} />;
+};
+
+export const Interactive = (args: StoryArgs): React.Node => {
+    return <WithState />;
+};