@khanacademy/perseus-editor 2.2.2 → 2.3.1

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

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 /* eslint-disable react/no-unsafe */
 /* eslint-disable react/sort-comp */
 import {
@@ -7,12 +6,21 @@ import {
     InteractiveGraphWidget,
     SizingUtils,
     Util,
+    PerseusImageBackground,
+    PerseusInteractiveGraphWidgetOptions,
+    APIOptionsWithDefaults,
 } from "@khanacademy/perseus";
-import createReactClass from "create-react-class";
+import {StyleType, View} from "@khanacademy/wonder-blocks-core";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import * as Typography from "@khanacademy/wonder-blocks-typography";
 import * as React from "react";
 import _ from "underscore";
 
+import GraphPointsCountSelector from "../components/graph-points-count-selector";
 import GraphSettings from "../components/graph-settings";
+import GraphTypeSelector from "../components/graph-type-selector";
+import SegmentCountSelector from "../components/segment-count-selector";
+import {parsePointCount} from "../util/points";
 
 const {InfoTip} = components;
 const {containerSizeClass, getInteractiveBoxFromSizeClass} = SizingUtils;
@@ -34,46 +42,98 @@ const deprecatedProps = {
     },
 } as const;
 
-const InteractiveGraphEditor: any = createReactClass({
-    displayName: "InteractiveGraphEditor",
-    className: "perseus-widget-interactive-graph",
+type Range = [number, number]; // [min, max]
 
-    statics: {
-        widgetName: "interactive-graph",
-    },
+// Renders the given children in a View laid out horizontally.
+const Row = (props: {style?: StyleType; children: React.ReactNode}) => {
+    const {children, style} = props;
 
-    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,
-            },
-        };
-    },
+    return (
+        <View
+            style={{
+                ...style,
+                flexDirection: "row",
+                marginTop: Spacing.xSmall_8,
+            }}
+        >
+            {children}
+        </View>
+    );
+};
+
+const FieldLabel = (props: {children: string}) => {
+    return (
+        <Typography.LabelSmall style={{marginRight: Spacing.xSmall_8}}>
+            {props.children}
+        </Typography.LabelSmall>
+    );
+};
+
+type Props = {
+    apiOptions: APIOptionsWithDefaults;
+
+    labels: ReadonlyArray<string>;
+    range: [Range, Range]; // x, y
+    step: [number, number]; // x, y
+    gridStep: [number, number]; // x, y
+    snapStep: [number, number]; // x, y
+    box: [number, number]; // x, y
+
+    valid: boolean;
+    backgroundImage: PerseusImageBackground;
+    markings: string; // STOPSHIP
+    showProtractor: boolean;
+    showRuler: boolean;
+    showTooltips: boolean;
+    rulerLabel: string;
+    rulerTicks: number;
+    correct: any; // STOPSHIP
+
+    graph: InteractiveGraphProps["graph"];
+    onChange: (props: Partial<Props>) => void;
+};
+
+type DefaultProps = {
+    labels: Props["labels"];
+    range: Props["range"];
+    step: Props["step"];
+    valid: Props["valid"];
+    backgroundImage: Props["backgroundImage"];
+    markings: Props["markings"];
+    showProtractor: Props["showProtractor"];
+    showRuler: Props["showRuler"];
+    showTooltips: Props["showTooltips"];
+    rulerLabel: Props["rulerLabel"];
+    rulerTicks: Props["rulerTicks"];
+    correct: Props["correct"];
+};
+
+class InteractiveGraphEditor extends React.Component<Props> {
+    displayName = "InteractiveGraphEditor";
+    className = "perseus-widget-interactive-graph";
+
+    static widgetName = "interactive-graph";
+
+    static defaultProps: DefaultProps = {
+        ...InteractiveGraph.defaultProps,
+        valid: true,
+        backgroundImage: defaultBackgroundImage,
+        showTooltips: false,
+        correct: {
+            type: InteractiveGraph.defaultProps.graph.type,
+            coords: null,
+        },
+    };
 
     // TODO(jack): Use versioning instead of DeprecationMixin
-    deprecatedProps: deprecatedProps,
+    deprecatedProps = deprecatedProps;
 
     // TODO(jangmi, CP-3288): Remove usage of `UNSAFE_componentWillMount`
     UNSAFE_componentWillMount() {
         DeprecationMixin.UNSAFE_componentWillMount.call(this);
-    },
+    }
 
-    render: function () {
+    render() {
         let graph;
         let equationString;
 
@@ -141,19 +201,204 @@ const InteractiveGraphEditor: any = createReactClass({
         }
 
         return (
-            <div className="perseus-widget-interactive-graph">
-                <div>
-                    Correct answer{" "}
+            <View>
+                <Row>
+                    <FieldLabel>Type of Graph:</FieldLabel>
+                    <GraphTypeSelector
+                        graphType={
+                            this.props.graph?.type ??
+                            InteractiveGraph.defaultProps.graph.type
+                        }
+                        onChange={(
+                            type: Required<InteractiveGraphProps>["graph"]["type"],
+                        ) => {
+                            this.props.onChange({
+                                graph: {type},
+                                correct: {type},
+                            });
+                        }}
+                    />
+                </Row>
+                {this.props.correct?.type === "point" && (
+                    <Row>
+                        <FieldLabel>Number of Points:</FieldLabel>
+                        <GraphPointsCountSelector
+                            numPoints={this.props.correct?.numPoints}
+                            onChange={(points) => {
+                                this.props.onChange({
+                                    correct: {
+                                        type: "point",
+                                        numPoints: points,
+                                    },
+                                });
+                            }}
+                        />
+                    </Row>
+                )}
+                {this.props.correct?.type === "polygon" && (
+                    <>
+                        <Row>
+                            <FieldLabel>Number of sides:</FieldLabel>
+                            <select
+                                key="polygon-select"
+                                value={this.props.correct?.numSides || 3}
+                                onChange={(e) => {
+                                    const graph = {
+                                        ...this.props.correct,
+                                        numSides: parsePointCount(
+                                            e.target.value,
+                                        ),
+                                        coords: null,
+                                        // reset the snap for UNLIMITED, which
+                                        // only supports "grid"
+                                        // From: D6578
+                                        snapTo: "grid",
+                                    };
+
+                                    this.props.onChange({correct: graph});
+                                }}
+                            >
+                                {_.map(_.range(3, 13), function (n) {
+                                    return (
+                                        <option key={n} value={n}>
+                                            {`${n} sides`}
+                                        </option>
+                                    );
+                                })}
+                                <option value={"unlimited"}>
+                                    unlimited sides
+                                </option>
+                            </select>
+                        </Row>
+                        <Row>
+                            <FieldLabel>Snap to:</FieldLabel>
+                            <select
+                                key="polygon-snap"
+                                value={this.props.correct?.snapTo}
+                                onChange={(e) => {
+                                    const graph = {
+                                        ...this.props.correct,
+                                        snapTo: e.target.value,
+                                        coords: null,
+                                    };
+
+                                    this.props.onChange({correct: graph});
+                                }}
+                            >
+                                <option value="grid">grid</option>
+                                {this.props.correct?.numSides !==
+                                    "unlimited" && (
+                                    <React.Fragment>
+                                        <option value="angles">
+                                            interior angles
+                                        </option>
+                                        <option value="sides">
+                                            side measures
+                                        </option>
+                                    </React.Fragment>
+                                )}
+                            </select>
+                            <InfoTip>
+                                <p>
+                                    These options affect the movement of the
+                                    vertex points. The grid option will guide
+                                    the points to the nearest half step along
+                                    the grid.
+                                </p>
+                                <p>
+                                    The interior angle and side measure options
+                                    guide the points to the nearest whole angle
+                                    or side
+                                </p>{" "}
+                                measure respectively.
+                            </InfoTip>
+                        </Row>
+                        <Row>
+                            <Typography.LabelSmall tag="label">
+                                Show angle measures:{" "}
+                                <input
+                                    type="checkbox"
+                                    checked={this.props.correct?.showAngles}
+                                    onChange={() => {
+                                        this.props.onChange({
+                                            correct: {
+                                                ...this.props.correct,
+                                                showAngles:
+                                                    !this.props.correct
+                                                        .showAngles,
+                                            },
+                                        });
+                                    }}
+                                />
+                            </Typography.LabelSmall>
+                            <InfoTip>
+                                <p>Displays the interior angle measures.</p>
+                            </InfoTip>
+                        </Row>
+                        <Row>
+                            <Typography.LabelSmall tag="label">
+                                Show side measures:{" "}
+                                <input
+                                    type="checkbox"
+                                    checked={this.props.correct?.showSides}
+                                    onChange={() => {
+                                        this.props.onChange({
+                                            correct: {
+                                                ...this.props.correct,
+                                                showSides:
+                                                    !this.props.correct
+                                                        .showSides,
+                                            },
+                                        });
+                                    }}
+                                />
+                            </Typography.LabelSmall>
+                            <InfoTip>
+                                <p>Displays the side lengths.</p>
+                            </InfoTip>
+                        </Row>
+                    </>
+                )}
+                {this.props.correct?.type === "segment" && (
+                    <Row>
+                        <FieldLabel>Number of segments: </FieldLabel>
+                        <SegmentCountSelector
+                            numSegments={this.props.correct?.numSegments}
+                            onChange={(sides) => {
+                                this.props.onChange({
+                                    correct: {
+                                        type: "segment",
+                                        numSegments: sides,
+                                        coords: null,
+                                    },
+                                });
+                            }}
+                        />
+                    </Row>
+                )}
+
+                <Row>
+                    <FieldLabel>Correct answer:</FieldLabel>
+                    <Typography.BodyMonospace
+                        style={{
+                            fontSize: 12,
+                            backgroundColor: "#eee",
+                            paddingInline: Spacing.xxSmall_6,
+                            borderColor: "#ccc",
+                            borderStyle: "solid",
+                            borderWidth: 1,
+                        }}
+                    >
+                        {equationString}
+                    </Typography.BodyMonospace>
                     <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>
-
+                    </InfoTip>
+                </Row>
                 <GraphSettings
                     box={getInteractiveBoxFromSizeClass(sizeClass)}
                     range={this.props.range}
@@ -171,7 +416,6 @@ const InteractiveGraphEditor: any = createReactClass({
                     rulerTicks={this.props.rulerTicks}
                     onChange={this.props.onChange}
                 />
-
                 {this.props.correct.type === "polygon" && (
                     <div className="type-settings">
                         <label>
@@ -260,18 +504,18 @@ const InteractiveGraphEditor: any = createReactClass({
                     </div>
                 )}
                 {graph}
-            </div>
+            </View>
         );
-    },
+    }
 
-    changeMatchType: function (e) {
+    changeMatchType(e) {
         const correct = _.extend({}, this.props.correct, {
             match: e.target.value,
         });
         this.props.onChange({correct: correct});
-    },
+    }
 
-    serialize: function () {
+    serialize(): PerseusInteractiveGraphWidgetOptions {
         const json = _.pick(
             this.props,
             "step",
@@ -291,6 +535,7 @@ const InteractiveGraphEditor: any = createReactClass({
         // eslint-disable-next-line react/no-string-refs
         const graph = this.refs.graph;
         if (graph) {
+            // @ts-expect-error TS2339 Property 'getUserInput' does not exist on type 'ReactInstance'. Property 'getUserInput' does not exist on type 'Component<any, {}, any>'.
             const correct = graph && graph.getUserInput();
             _.extend(json, {
                 graph: {type: correct.type},
@@ -317,8 +562,9 @@ const InteractiveGraphEditor: any = createReactClass({
                 },
             );
         }
+        // @ts-expect-error TS2739 Type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "step" | "gridStep" | "snapStep" | "backgroundImage" | "markings" | "labels" | ... 5 more ... | "range">' is missing the following properties from type 'PerseusInteractiveGraphWidgetOptions': graph, correct
         return json;
-    },
-});
+    }
+}
 
 export default InteractiveGraphEditor;

package/tsconfig-build.json

@@ -1,5 +1,4 @@
 {
-    "exclude": ["dist", "**/*.test.*", "**/*.testdata.*", "**/*.stories.*", "**/*.cypress.*"],
     "extends": "../tsconfig-shared.json",
     "compilerOptions": {
         "outDir": "./dist",