@khanacademy/perseus-editor 2.15.4 → 2.15.6

package/src/widgets/{interaction-editor.tsx → interaction-editor/interaction-editor.tsx}

@@ -1,26 +1,26 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* eslint-disable @babel/no-invalid-this, react/no-unsafe, react/sort-comp */
+/* eslint-disable @babel/no-invalid-this, react/no-unsafe */
 import {
-    components,
     Changeable,
     Dependencies,
     EditorJsonify,
-    KhanColors,
     Util,
-    ArrowPicker,
-    ColorPicker,
-    DashPicker,
     ElementContainer,
 } from "@khanacademy/perseus";
-import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-import GraphSettings from "../components/graph-settings";
+import GraphSettings from "../../components/graph-settings";
 
-import ConstraintEditor from "./interaction/constraint-editor";
+import FunctionEditor from "./function-editor";
+import LabelEditor from "./label-editor";
+import LineEditor from "./line-editor";
+import MovableLineEditor from "./movable-line-editor";
+import MovablePointEditor from "./movable-point-editor";
+import ParametricEditor from "./parametric-editor";
+import PointEditor from "./point-editor";
+import RectangleEditor from "./rectangle-editor";
 
-const {MathInput, NumberInput, TextInput} = components;
 const {getDependencies} = Dependencies;
 const {unescapeMathMode} = Util;
 
@@ -39,785 +39,38 @@ const defaultInteractionProps = {
     elements: [],
 } as const;
 
-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,
-    };
-
-    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}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("coordX")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.coordY}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("coordY")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    <ColorPicker
-                        value={this.props.color}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("color")}
-                    />
-                </div>
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-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,
-    };
-
-    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}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("startX")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.startY}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        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}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("endX")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.endY}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("endY")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    <ColorPicker
-                        value={this.props.color}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("color")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <DashPicker
-                        value={this.props.strokeDasharray}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("strokeDasharray")}
-                    />
-                    &nbsp; &nbsp;
-                    <ArrowPicker
-                        value={this.props.arrows}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("arrows")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <div className="perseus-widget-left-col">
-                        Width:{" "}
-                        <NumberInput
-                            value={this.props.strokeWidth}
-                            placeholder={2}
-                            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                            onChange={this.change("strokeWidth")}
-                        />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-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",
-    };
-
-    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>
-        );
-    }
-
-    change = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-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",
-    };
-
-    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>
-        );
-    }
-
-    change = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-type FunctionEditorProps = any;
-
-//
-// Editor for function plots
-//
-// TODO(eater): Factor this out
-//
-class FunctionEditor extends React.Component<FunctionEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        value: PropTypes.string,
-        rangeMin: PropTypes.string,
-        rangeMax: PropTypes.string,
-        color: PropTypes.string,
-        strokeDashArray: PropTypes.string,
-        strokeWidth: PropTypes.number,
-    };
-
-    static defaultProps = {
-        value: "x",
-        rangeMin: "-10",
-        rangeMax: "10",
-        color: KhanColors.BLUE,
-        strokeDasharray: "",
-        strokeWidth: 2,
-    };
-
-    render(): React.ReactNode {
-        const {TeX} = getDependencies();
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
-
-        return (
-            <div className="graph-settings">
-                <div className="perseus-widget-row">
-                    <TeX>{this.props.funcName + "(x)="}</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.value}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("value")}
-                        analytics={analyticsStub}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    Range: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.rangeMin}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("rangeMin")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.rangeMax}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("rangeMax")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    <ColorPicker
-                        value={this.props.color}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("color")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <DashPicker
-                        value={this.props.strokeDasharray}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("strokeDasharray")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <div className="perseus-widget-left-col">
-                        Width:{" "}
-                        <NumberInput
-                            value={this.props.strokeWidth}
-                            placeholder={2}
-                            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                            onChange={this.change("strokeWidth")}
-                        />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-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,
-    };
-
-    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}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("x")}
-                        analytics={analyticsStub}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <TeX>Y(t) =</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.y}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("y")}
-                        analytics={analyticsStub}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    Range: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.rangeMin}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("rangeMin")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.rangeMax}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("rangeMax")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    <ColorPicker
-                        value={this.props.color}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("color")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <DashPicker
-                        value={this.props.strokeDasharray}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("strokeDasharray")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <div className="perseus-widget-left-col">
-                        Width:{" "}
-                        <NumberInput
-                            value={this.props.strokeWidth}
-                            placeholder={2}
-                            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                            onChange={this.change("strokeWidth")}
-                        />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-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",
-    };
-
-    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}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("label")}
-                        style={{
-                            width: "100%",
-                        }}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    Location: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.coordX}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("coordX")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.coordY}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("coordY")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    <ColorPicker
-                        value={this.props.color}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("color")}
-                    />
-                </div>
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-type RectangleEditorProps = any;
-
-//
-// Editor for rectangles
-//
-// TODO(eater): Factor this out maybe?
-//
-class RectangleEditor extends React.Component<RectangleEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        color: PropTypes.string,
-        coordX: PropTypes.string,
-        coordY: PropTypes.string,
-        height: PropTypes.string,
-        width: PropTypes.string,
-    };
-
-    static defaultProps = {
-        coordX: "-5",
-        coordY: "5",
-        width: "2",
-        height: "3",
-        color: KhanColors.LIGHT_BLUE,
-    };
-
-    render(): React.ReactNode {
-        const {TeX} = getDependencies();
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
-
-        return (
-            <div className="graph-settings">
-                <div className="perseus-widget-row">
-                    Bottom left: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.coordX}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("coordX")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.coordY}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("coordY")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    Width:{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.width}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("width")}
-                        analytics={analyticsStub}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    Height:{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.height}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("height")}
-                        analytics={analyticsStub}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <ColorPicker
-                        value={this.props.color}
-                        lightColors={true}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("color")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    You want a border? Sorry, draw your own.
-                </div>
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-type InteractionEditorProps = any;
-type InteractionEditorState = any;
-
-class InteractionEditor extends React.Component<
-    InteractionEditorProps,
-    InteractionEditorState
-> {
-    // TODO(eater): Make more better
-    static propTypes = {
-        ...Changeable.propTypes,
-        // eslint-disable-next-line react/forbid-prop-types
-        elements: PropTypes.arrayOf(PropTypes.object),
-        graph: PropTypes.objectOf(PropTypes.any),
-    };
-
+type Graph = {
+    box: ReadonlyArray<number>;
+    labels: ReadonlyArray<string>;
+    range: ReadonlyArray<ReadonlyArray<number>>;
+    tickStep: ReadonlyArray<number>;
+    gridStep: ReadonlyArray<number>;
+    markings: string;
+    valid?: boolean;
+};
+
+type Props = Changeable.ChangeableProps & {
+    elements: ReadonlyArray<any>;
+    graph: Graph;
+};
+
+type DefaultProps = {
+    elements: Props["elements"];
+    graph: Props["graph"];
+};
+
+type State = any;
+
+class InteractionEditor extends React.Component<Props, State> {
     static widgetName = "interaction" as const;
-    static defaultProps: InteractionEditorProps = defaultInteractionProps;
+    static defaultProps: DefaultProps = defaultInteractionProps;
 
-    state: InteractionEditorState = {
+    state: State = {
         usedVarSubscripts: this._getAllVarSubscripts(this.props.elements),
         usedFunctionNames: this._getAllFunctionNames(this.props.elements),
     };
 
-    UNSAFE_componentWillReceiveProps(nextProps: InteractionEditorProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: Props) {
         this.setState({
             usedVarSubscripts: this._getAllVarSubscripts(nextProps.elements),
             usedFunctionNames: this._getAllFunctionNames(nextProps.elements),
@@ -956,6 +209,10 @@ class InteractionEditor extends React.Component<
         return Changeable.change.apply(this, args);
     };
 
+    serialize: () => any = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
     render(): React.ReactNode {
         const {TeX} = getDependencies();
 
@@ -1487,10 +744,6 @@ class InteractionEditor extends React.Component<
         );
         /* eslint-enable max-len */
     }
-
-    serialize: () => any = () => {
-        return EditorJsonify.serialize.call(this);
-    };
 }
 
 export default InteractionEditor;