@khanacademy/perseus-editor 2.15.3 → 2.15.5

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

@@ -0,0 +1,91 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ColorPicker,
+} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+const {MathInput, TextInput} = components;
+const {getDependencies} = Dependencies;
+
+type LabelEditorProps = any;
+
+//
+// Editor for labels
+//
+// TODO(eater): Factor this out maybe?
+// TODO(eater): Add text direction
+//
+class LabelEditor extends React.Component<LabelEditorProps> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        color: PropTypes.string,
+        coordX: PropTypes.string,
+        coordY: PropTypes.string,
+        label: PropTypes.string,
+    };
+
+    static 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();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
+
+        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>
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.coordX}
+                        onChange={this.change("coordX")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.coordY}
+                        onChange={this.change("coordY")}
+                        analytics={analyticsStub}
+                    />
+                    <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,129 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ArrowPicker,
+    ColorPicker,
+    DashPicker,
+} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+const {MathInput, NumberInput} = components;
+const {getDependencies} = Dependencies;
+
+type LineEditorProps = any;
+
+//
+// Editor for non-interactive line segments
+//
+// TODO(eater): Factor this out
+//
+class LineEditor extends React.Component<LineEditorProps> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        startX: PropTypes.string,
+        startY: PropTypes.string,
+        endX: PropTypes.string,
+        endY: PropTypes.string,
+        color: PropTypes.string,
+        strokeDasharray: PropTypes.string,
+        arrows: PropTypes.string,
+        strokeWidth: PropTypes.number,
+    };
+
+    static 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();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    Start: <TeX>\Large(</TeX>
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.startX}
+                        onChange={this.change("startX")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.startY}
+                        onChange={this.change("startY")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    End: <TeX>\Large(</TeX>
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.endX}
+                        onChange={this.change("endX")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.endY}
+                        onChange={this.change("endY")}
+                        analytics={analyticsStub}
+                    />
+                    <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/movable-line-editor.tsx

@@ -0,0 +1,125 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+import ConstraintEditor from "./constraint-editor";
+
+const {MathInput, NumberInput} = components;
+const {getDependencies} = Dependencies;
+
+type MovableLineEditorProps = any;
+
+//
+// Editor for interactive movable line segments
+//
+// TODO(eater): Factor this out
+// TODO(eater): Rethink how constraints are represented
+//
+class MovableLineEditor extends React.Component<MovableLineEditorProps> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        startX: PropTypes.string,
+        startY: PropTypes.string,
+        endX: PropTypes.string,
+        endY: PropTypes.string,
+        constraint: PropTypes.string,
+        snap: PropTypes.number,
+        constraintFn: PropTypes.string,
+    };
+
+    static defaultProps = {
+        startX: "-5",
+        startY: "5",
+        endX: "5",
+        endY: "5",
+        constraint: "none",
+        snap: 0.5,
+        constraintFn: "0",
+        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();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
+
+        return (
+            <div className="graph-settings">
+                Initial position:
+                <div className="perseus-widget-row">
+                    Start: <TeX>\Large(</TeX>
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.startX}
+                        onChange={this.change("startX")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.startY}
+                        onChange={this.change("startY")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    End: <TeX>\Large(</TeX>
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.endX}
+                        onChange={this.change("endX")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.endY}
+                        onChange={this.change("endY")}
+                        analytics={analyticsStub}
+                    />
+                    <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>
+                {/* @ts-expect-error - TS2769 - No overload matches this call. */}
+                <ConstraintEditor {...this.props} />
+            </div>
+        );
+    }
+}
+
+export default MovableLineEditor;

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

@@ -0,0 +1,92 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+import ConstraintEditor from "./constraint-editor";
+
+const {MathInput, NumberInput} = components;
+const {getDependencies} = Dependencies;
+
+type MovablePointEditorProps = any;
+
+//
+// Editor for interactive movable points
+//
+// TODO(eater): Factor this out
+// TODO(eater): Rethink how constraints are represented
+//
+class MovablePointEditor extends React.Component<MovablePointEditorProps> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        startX: PropTypes.string,
+        startY: PropTypes.string,
+        constraint: PropTypes.string,
+        snap: PropTypes.number,
+        constraintFn: PropTypes.string,
+    };
+
+    static defaultProps = {
+        startX: "0",
+        startY: "0",
+        constraint: "none",
+        snap: 0.5,
+        constraintFn: "0",
+        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();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    Start: <TeX>\Large(</TeX>
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.startX}
+                        onChange={this.change("startX")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.startY}
+                        onChange={this.change("startY")}
+                        analytics={analyticsStub}
+                    />
+                    <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>
+                {/* @ts-expect-error - TS2769 - No overload matches this call. */}
+                <ConstraintEditor {...this.props} />
+            </div>
+        );
+    }
+}
+
+export default MovablePointEditor;

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

@@ -0,0 +1,122 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ColorPicker,
+    DashPicker,
+} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+const {MathInput, NumberInput} = components;
+const {getDependencies} = Dependencies;
+
+type ParametricEditorProps = any;
+
+//
+// Editor for parametric plots
+//
+// TODO(eater): Factor this out
+//
+class ParametricEditor extends React.Component<ParametricEditorProps> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        x: PropTypes.string,
+        y: PropTypes.string,
+        rangeMin: PropTypes.string,
+        rangeMax: PropTypes.string,
+        color: PropTypes.string,
+        strokeDashArray: PropTypes.string,
+        strokeWidth: PropTypes.number,
+    };
+
+    static 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();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    <TeX>X(t) =</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.x}
+                        onChange={this.change("x")}
+                        analytics={analyticsStub}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <TeX>Y(t) =</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.y}
+                        onChange={this.change("y")}
+                        analytics={analyticsStub}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    Range: <TeX>\Large(</TeX>
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.rangeMin}
+                        onChange={this.change("rangeMin")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.rangeMax}
+                        onChange={this.change("rangeMax")}
+                        analytics={analyticsStub}
+                    />
+                    <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,79 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ColorPicker,
+} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+const {MathInput} = components;
+const {getDependencies} = Dependencies;
+
+type PointEditorProps = any;
+
+//
+// Editor for non-interactive points
+//
+// TODO(eater): Factor this out
+//
+class PointEditor extends React.Component<PointEditorProps> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        coordX: PropTypes.string,
+        coordY: PropTypes.string,
+        color: PropTypes.string,
+    };
+
+    static 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();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    Coordinate: <TeX>\Large(</TeX>
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.coordX}
+                        onChange={this.change("coordX")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.coordY}
+                        onChange={this.change("coordY")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    <ColorPicker
+                        value={this.props.color}
+                        onChange={this.change("color")}
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+
+export default PointEditor;