@khanacademy/perseus-editor 4.1.5 → 4.1.6

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

@@ -1,87 +0,0 @@
-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

@@ -1,125 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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: MathFieldInterface) => {
-                            // 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

@@ -1,121 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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;