@khanacademy/perseus-editor 2.15.4 → 2.15.6

package/src/widgets/interaction-editor/label-editor.tsx

@@ -0,0 +1,87 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ColorPicker,
+} from "@khanacademy/perseus";
+import * as React from "react";
+import _ from "underscore";
+
+import MathquillInput from "./mathquill-input";
+
+const {TextInput} = components;
+const {getDependencies} = Dependencies;
+
+type Props = Changeable.ChangeableProps & {
+    color: string;
+    coordX: string;
+    coordY: string;
+    label: string;
+};
+
+type DefaultProps = {
+    color: Props["color"];
+    coordX: Props["coordX"];
+    coordY: Props["coordY"];
+    label: Props["label"];
+};
+
+// Editor for labels
+// TODO(eater): Add text direction
+class LabelEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        coordX: "0",
+        coordY: "0",
+        color: KhanColors.BLACK,
+        label: "\\phi",
+    };
+
+    change: (arg1: any, arg2?: any, arg3?: any) => any = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    <TextInput
+                        value={this.props.label}
+                        onChange={this.change("label")}
+                        style={{
+                            width: "100%",
+                        }}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    Location: <TeX>\Large(</TeX>
+                    <MathquillInput
+                        value={this.props.coordX}
+                        onChange={this.change("coordX")}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.coordY}
+                        onChange={this.change("coordY")}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    <ColorPicker
+                        value={this.props.color}
+                        onChange={this.change("color")}
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+
+export default LabelEditor;

package/src/widgets/interaction-editor/line-editor.tsx

@@ -0,0 +1,125 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ArrowPicker,
+    ColorPicker,
+    DashPicker,
+} from "@khanacademy/perseus";
+import * as React from "react";
+import _ from "underscore";
+
+import MathquillInput from "./mathquill-input";
+
+const {NumberInput} = components;
+const {getDependencies} = Dependencies;
+
+type Props = Changeable.ChangeableProps & {
+    startX: string;
+    startY: string;
+    endX: string;
+    endY: string;
+    color: string;
+    strokeDasharray: string;
+    arrows: string;
+    strokeWidth: number;
+};
+
+type DefaultProps = {
+    startX: Props["startX"];
+    startY: Props["startY"];
+    endX: Props["endX"];
+    endY: Props["endY"];
+    color: Props["color"];
+    strokeDasharray: Props["strokeDasharray"];
+    arrows: Props["arrows"];
+    strokeWidth: Props["strokeWidth"];
+};
+
+// Editor for non-interactive line segments
+class LineEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        startX: "-5",
+        startY: "5",
+        endX: "5",
+        endY: "5",
+        color: KhanColors.BLACK,
+        strokeDasharray: "",
+        arrows: "",
+        strokeWidth: 2,
+    };
+
+    change: (arg1: any, arg2?: any, arg3?: any) => any = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    Start: <TeX>\Large(</TeX>
+                    <MathquillInput
+                        value={this.props.startX}
+                        onChange={this.change("startX")}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.startY}
+                        onChange={this.change("startY")}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    End: <TeX>\Large(</TeX>
+                    <MathquillInput
+                        value={this.props.endX}
+                        onChange={this.change("endX")}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.endY}
+                        onChange={this.change("endY")}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    <ColorPicker
+                        value={this.props.color}
+                        onChange={this.change("color")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <DashPicker
+                        value={this.props.strokeDasharray}
+                        onChange={this.change("strokeDasharray")}
+                    />
+                    &nbsp; &nbsp;
+                    <ArrowPicker
+                        value={this.props.arrows}
+                        onChange={this.change("arrows")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <div className="perseus-widget-left-col">
+                        Width:{" "}
+                        <NumberInput
+                            value={this.props.strokeWidth}
+                            placeholder={2}
+                            onChange={this.change("strokeWidth")}
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default LineEditor;

package/src/widgets/interaction-editor/mathquill-input.tsx

@@ -0,0 +1,81 @@
+import {createMathField} from "@khanacademy/math-input";
+import Color from "@khanacademy/wonder-blocks-color";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+import {useRef, useEffect} from "react";
+
+import type {MathFieldInterface} from "@khanacademy/math-input";
+
+type Props = {
+    value: string;
+    onChange: (value: string) => void;
+};
+
+/**
+ * A simple Mathquill MathField input for the InteractionEditor.
+ * Unlike our other uses of Mathquill, we're not using a keypad here;
+ * it's just the input itself for use writing TeX.
+ */
+export default function MathquillInput(props: Props) {
+    const mathFieldWrapperRef = useRef<HTMLSpanElement>(null);
+    const mathFieldInstance = useRef<MathFieldInterface>();
+
+    useEffect(() => {
+        // If we have the mount for the input, but not the input
+        // make a new Mathquill input
+        if (mathFieldWrapperRef.current && !mathFieldInstance.current) {
+            // Initialize MathQuill.MathField instance
+            mathFieldInstance.current = createMathField(
+                mathFieldWrapperRef.current,
+                (baseConfig) => ({
+                    ...baseConfig,
+                    handlers: {
+                        edit: (mathField) => {
+                            // This handler is guaranteed to be called on change, but
+                            // unlike React it sometimes generates false positives.
+                            // One of these is on initialization (with an empty string
+                            // value), so we have to guard against that below.
+                            let value = mathField.latex();
+
+                            // Provide a MathQuill-compatible way to generate the
+                            // not-equals sign without pasting unicode or typing TeX
+                            value = value.replace(/<>/g, "\\ne");
+
+                            if (props.value !== value) {
+                                props.onChange(value);
+                            }
+                        },
+                        upOutOf: (mathField) => {
+                            // This handler is called when the user presses the up
+                            // arrow key, but there is nowhere in the expression to go
+                            // up to (no numerator or exponent). For ease of use,
+                            // interpret this as an attempt to create an exponent.
+                            mathField.typedText("^");
+                        },
+                    },
+                }),
+            );
+        }
+    });
+
+    return (
+        <View style={styles.outerWrapper}>
+            <span
+                ref={mathFieldWrapperRef}
+                className="perseus-math-input mq-editable-field mq-math-mode"
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    outerWrapper: {
+        display: "inline-block",
+        borderStyle: "solid",
+        borderWidth: 1,
+        borderColor: Color.offBlack50,
+        borderRadius: 3,
+        background: Color.white,
+    },
+});

package/src/widgets/interaction-editor/movable-line-editor.tsx

@@ -0,0 +1,121 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+} from "@khanacademy/perseus";
+import * as React from "react";
+import _ from "underscore";
+
+import ConstraintEditor from "./constraint-editor";
+import MathquillInput from "./mathquill-input";
+
+const {NumberInput} = components;
+const {getDependencies} = Dependencies;
+
+type Props = Changeable.ChangeableProps & {
+    startX: string;
+    startY: string;
+    endX: string;
+    endY: string;
+    constraint: string;
+    snap: number;
+    constraintFn: string;
+    startSubscript: number;
+    endSubscript: number;
+};
+
+type DefaultProps = {
+    startX: Props["startX"];
+    startY: Props["startY"];
+    endX: Props["endX"];
+    endY: Props["endY"];
+    constraint: Props["constraint"];
+    snap: Props["snap"];
+    constraintFn: Props["constraintFn"];
+};
+
+// Editor for interactive movable line segments
+// TODO(eater): Rethink how constraints are represented
+class MovableLineEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        startX: "-5",
+        startY: "5",
+        endX: "5",
+        endY: "5",
+        constraint: "none",
+        snap: 0.5,
+        constraintFn: "0",
+        // @ts-expect-error - TS2561
+        constraintXMin: "-10",
+        constraintXMax: "10",
+        constraintYMin: "-10",
+        constraintYMax: "10",
+    };
+
+    change = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+
+        return (
+            <div className="graph-settings">
+                Initial position:
+                <div className="perseus-widget-row">
+                    Start: <TeX>\Large(</TeX>
+                    <MathquillInput
+                        value={this.props.startX}
+                        onChange={this.change("startX")}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.startY}
+                        onChange={this.change("startY")}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    End: <TeX>\Large(</TeX>
+                    <MathquillInput
+                        value={this.props.endX}
+                        onChange={this.change("endX")}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.endY}
+                        onChange={this.change("endY")}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    Start updates <TeX>(x_n, y_n)</TeX> for <TeX>n =</TeX>
+                    <NumberInput
+                        value={this.props.startSubscript}
+                        placeholder={0}
+                        onChange={this.change("startSubscript")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    End updates <TeX>(x_m, y_m)</TeX> for <TeX>m =</TeX>
+                    <NumberInput
+                        value={this.props.endSubscript}
+                        placeholder={0}
+                        onChange={this.change("endSubscript")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    All constraints are applied to the start point.
+                </div>
+                <ConstraintEditor {...this.props} />
+            </div>
+        );
+    }
+}
+
+export default MovableLineEditor;

package/src/widgets/interaction-editor/movable-point-editor.tsx

@@ -0,0 +1,89 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+} from "@khanacademy/perseus";
+import * as React from "react";
+import _ from "underscore";
+
+import ConstraintEditor from "./constraint-editor";
+import MathquillInput from "./mathquill-input";
+
+const {NumberInput} = components;
+const {getDependencies} = Dependencies;
+
+type Props = Changeable.ChangeableProps & {
+    startX: string;
+    startY: string;
+    constraint: string;
+    snap: number;
+    constraintFn: string;
+    varSubscript: number;
+};
+
+type DefaultProps = {
+    startX: Props["startX"];
+    startY: Props["startY"];
+    constraint: Props["constraint"];
+    snap: Props["snap"];
+    constraintFn: Props["constraintFn"];
+};
+
+// Editor for interactive movable points
+// TODO(eater): Rethink how constraints are represented
+class MovablePointEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        startX: "0",
+        startY: "0",
+        constraint: "none",
+        snap: 0.5,
+        constraintFn: "0",
+        // @ts-expect-error - TS2561
+        constraintXMin: "-10",
+        constraintXMax: "10",
+        constraintYMin: "-10",
+        constraintYMax: "10",
+    };
+
+    change = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    Start: <TeX>\Large(</TeX>
+                    <MathquillInput
+                        value={this.props.startX}
+                        onChange={this.change("startX")}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.startY}
+                        onChange={this.change("startY")}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    Update <TeX>(x_n, y_n)</TeX> for <TeX>n =</TeX>{" "}
+                    <NumberInput
+                        value={this.props.varSubscript}
+                        placeholder={0}
+                        onChange={this.change("varSubscript")}
+                    />
+                </div>
+                <ConstraintEditor {...this.props} />
+            </div>
+        );
+    }
+}
+
+export default MovablePointEditor;

package/src/widgets/interaction-editor/parametric-editor.tsx

@@ -0,0 +1,117 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ColorPicker,
+    DashPicker,
+} from "@khanacademy/perseus";
+import * as React from "react";
+import _ from "underscore";
+
+import MathquillInput from "./mathquill-input";
+
+const {NumberInput} = components;
+const {getDependencies} = Dependencies;
+
+type Props = Changeable.ChangeableProps & {
+    x: string;
+    y: string;
+    rangeMin: string;
+    rangeMax: string;
+    color: string;
+    strokeDasharray: string;
+    strokeWidth: number;
+};
+
+type DefaultProps = {
+    x: Props["x"];
+    y: Props["y"];
+    rangeMin: Props["rangeMin"];
+    rangeMax: Props["rangeMax"];
+    color: Props["color"];
+    strokeDasharray: Props["strokeDasharray"];
+    strokeWidth: Props["strokeWidth"];
+};
+
+// Editor for parametric plots
+class ParametricEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        x: "cos(t)",
+        y: "sin(t)",
+        rangeMin: "0",
+        rangeMax: "2\\pi",
+        color: KhanColors.BLUE,
+        strokeDasharray: "",
+        strokeWidth: 2,
+    };
+
+    change: (arg1: any, arg2?: any, arg3?: any) => any = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    <TeX>X(t) =</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.x}
+                        onChange={this.change("x")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <TeX>Y(t) =</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.y}
+                        onChange={this.change("y")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    Range: <TeX>\Large(</TeX>
+                    <MathquillInput
+                        value={this.props.rangeMin}
+                        onChange={this.change("rangeMin")}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.rangeMax}
+                        onChange={this.change("rangeMax")}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    <ColorPicker
+                        value={this.props.color}
+                        onChange={this.change("color")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <DashPicker
+                        value={this.props.strokeDasharray}
+                        onChange={this.change("strokeDasharray")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <div className="perseus-widget-left-col">
+                        Width:{" "}
+                        <NumberInput
+                            value={this.props.strokeWidth}
+                            placeholder={2}
+                            onChange={this.change("strokeWidth")}
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default ParametricEditor;

package/src/widgets/interaction-editor/point-editor.tsx

@@ -0,0 +1,72 @@
+import {
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ColorPicker,
+} from "@khanacademy/perseus";
+import * as React from "react";
+import _ from "underscore";
+
+import MathquillInput from "./mathquill-input";
+
+const {getDependencies} = Dependencies;
+
+type Props = Changeable.ChangeableProps & {
+    coordX: string;
+    coordY: string;
+    color: string;
+};
+
+type DefaultProps = {
+    coordX: Props["coordX"];
+    coordY: Props["coordY"];
+    color: Props["color"];
+};
+
+// Editor for non-interactive points
+class PointEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        coordX: "0",
+        coordY: "0",
+        color: KhanColors.BLACK,
+    };
+
+    change: (arg1: any, arg2?: any, arg3?: any) => any = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    Coordinate: <TeX>\Large(</TeX>
+                    <MathquillInput
+                        value={this.props.coordX}
+                        onChange={this.change("coordX")}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.coordY}
+                        onChange={this.change("coordY")}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    <ColorPicker
+                        value={this.props.color}
+                        onChange={this.change("color")}
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+
+export default PointEditor;