@khanacademy/perseus-editor 2.15.4 → 2.15.6

package/dist/widgets/interaction-editor/function-editor.d.ts

@@ -0,0 +1,25 @@
+import { Changeable } from "@khanacademy/perseus";
+import * as React from "react";
+type Props = Changeable.ChangeableProps & {
+    value: string;
+    rangeMin: string;
+    rangeMax: string;
+    color: string;
+    strokeDasharray: string;
+    strokeWidth: number;
+};
+type DefaultProps = {
+    value: Props["value"];
+    rangeMin: Props["rangeMin"];
+    rangeMax: Props["rangeMax"];
+    color: Props["color"];
+    strokeDasharray: Props["strokeDasharray"];
+    strokeWidth: Props["strokeWidth"];
+};
+declare class FunctionEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps;
+    change: (arg1: any, arg2?: any, arg3?: any) => any;
+    serialize: () => any;
+    render(): React.ReactNode;
+}
+export default FunctionEditor;

package/dist/widgets/interaction-editor/index.d.ts

@@ -0,0 +1,2 @@
+import InteractionEditor from "./interaction-editor";
+export default InteractionEditor;

package/dist/widgets/interaction-editor/interaction-editor.d.ts

@@ -0,0 +1,37 @@
+import { Changeable } from "@khanacademy/perseus";
+import * as React from "react";
+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;
+declare class InteractionEditor extends React.Component<Props, State> {
+    static widgetName: "interaction";
+    static defaultProps: DefaultProps;
+    state: State;
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    _getAllVarSubscripts(elements: ReadonlyArray<any>): ReadonlyArray<any>;
+    _getAllFunctionNames(elements: ReadonlyArray<any>): ReadonlyArray<string>;
+    _updateGraphProps: (arg1: any) => any;
+    _addNewElement: (arg1: React.ChangeEvent<HTMLInputElement>) => void;
+    _deleteElement: (arg1: number) => void;
+    _moveElementUp: (arg1: number) => void;
+    _moveElementDown: (arg1: number) => void;
+    change: (arg1: any, arg2: any, arg3: any) => any;
+    serialize: () => any;
+    render(): React.ReactNode;
+}
+export default InteractionEditor;

package/dist/widgets/interaction-editor/label-editor.d.ts

@@ -0,0 +1,21 @@
+import { Changeable } from "@khanacademy/perseus";
+import * as React from "react";
+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"];
+};
+declare class LabelEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps;
+    change: (arg1: any, arg2?: any, arg3?: any) => any;
+    serialize: () => any;
+    render(): React.ReactNode;
+}
+export default LabelEditor;

package/dist/widgets/interaction-editor/line-editor.d.ts

@@ -0,0 +1,29 @@
+import { Changeable } from "@khanacademy/perseus";
+import * as React from "react";
+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"];
+};
+declare class LineEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps;
+    change: (arg1: any, arg2?: any, arg3?: any) => any;
+    serialize: () => any;
+    render(): React.ReactNode;
+}
+export default LineEditor;

package/dist/widgets/interaction-editor/mathquill-input.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+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): JSX.Element;
+export {};

package/dist/widgets/interaction-editor/movable-line-editor.d.ts

@@ -0,0 +1,29 @@
+import { Changeable } from "@khanacademy/perseus";
+import * as React from "react";
+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"];
+};
+declare class MovableLineEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps;
+    change: (...args: any[]) => any;
+    serialize: () => any;
+    render(): React.ReactNode;
+}
+export default MovableLineEditor;

package/dist/widgets/interaction-editor/movable-point-editor.d.ts

@@ -0,0 +1,24 @@
+import { Changeable } from "@khanacademy/perseus";
+import * as React from "react";
+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"];
+};
+declare class MovablePointEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps;
+    change: (...args: any[]) => any;
+    serialize: () => any;
+    render(): React.ReactNode;
+}
+export default MovablePointEditor;

package/dist/widgets/interaction-editor/parametric-editor.d.ts

@@ -0,0 +1,27 @@
+import { Changeable } from "@khanacademy/perseus";
+import * as React from "react";
+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"];
+};
+declare class ParametricEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps;
+    change: (arg1: any, arg2?: any, arg3?: any) => any;
+    serialize: () => any;
+    render(): React.ReactNode;
+}
+export default ParametricEditor;

package/dist/widgets/interaction-editor/point-editor.d.ts

@@ -0,0 +1,19 @@
+import { Changeable } from "@khanacademy/perseus";
+import * as React from "react";
+type Props = Changeable.ChangeableProps & {
+    coordX: string;
+    coordY: string;
+    color: string;
+};
+type DefaultProps = {
+    coordX: Props["coordX"];
+    coordY: Props["coordY"];
+    color: Props["color"];
+};
+declare class PointEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps;
+    change: (arg1: any, arg2?: any, arg3?: any) => any;
+    serialize: () => any;
+    render(): React.ReactNode;
+}
+export default PointEditor;

package/dist/widgets/interaction-editor/rectangle-editor.d.ts

@@ -0,0 +1,23 @@
+import { Changeable } from "@khanacademy/perseus";
+import * as React from "react";
+type Props = Changeable.ChangeableProps & {
+    color: string;
+    coordX: string;
+    coordY: string;
+    height: string;
+    width: string;
+};
+type DefaultProps = {
+    color: Props["color"];
+    coordX: Props["coordX"];
+    coordY: Props["coordY"];
+    height: Props["height"];
+    width: Props["width"];
+};
+declare class RectangleEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps;
+    change: (arg1: any, arg2?: any, arg3?: any) => any;
+    serialize: () => any;
+    render(): React.ReactNode;
+}
+export default RectangleEditor;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.15.4",
+    "version": "2.15.6",
     "publishConfig": {
         "access": "public"
     },
@@ -24,7 +24,8 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.7",
         "@khanacademy/kmath": "^0.1.8",
-        "@khanacademy/perseus": "^17.4.0",
+        "@khanacademy/math-input": "^16.4.0",
+        "@khanacademy/perseus": "^17.5.0",
         "@khanacademy/perseus-core": "1.4.1"
     },
     "devDependencies": {

package/src/widgets/__stories__/interaction-editor.stories.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import {useState} from "react";
+
+import InteractionEditor from "../interaction-editor";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Editor/Widgets/Interaction Editor",
+} as Story;
+
+export const Default = (args: StoryArgs): React.ReactElement => {
+    const [elements, setElements] = useState();
+    const [graph, setGraph] = useState();
+
+    function handleChange(next) {
+        if (next.graph) {
+            setGraph(next.graph);
+        }
+
+        if (next.elements) {
+            setElements(next.elements);
+        }
+    }
+
+    return (
+        <InteractionEditor
+            onChange={handleChange}
+            elements={elements}
+            graph={graph}
+        />
+    );
+};

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

@@ -1,7 +1,9 @@
 import {components, Changeable, Dependencies} from "@khanacademy/perseus";
 import * as React from "react";
 
-const {ButtonGroup, MathInput, NumberInput} = components;
+import MathquillInput from "./mathquill-input";
+
+const {ButtonGroup, NumberInput} = components;
 
 type Props = Changeable.ChangeableProps & {
     constraint: string;
@@ -45,8 +47,6 @@ class ConstraintEditor extends React.Component<Props> {
     render(): React.ReactNode {
         const {TeX} = Dependencies.getDependencies();
 
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
-
         return (
             <div>
                 <div className="perseus-widget-row">
@@ -77,11 +77,9 @@ class ConstraintEditor extends React.Component<Props> {
                     <div className="graph-settings">
                         <div className="perseus-widget-row">
                             <TeX>x=</TeX>{" "}
-                            <MathInput
-                                buttonsVisible="never"
+                            <MathquillInput
                                 value={this.props.constraintFn}
                                 onChange={this.change("constraintFn")}
-                                analytics={analyticsStub}
                             />
                         </div>
                     </div>
@@ -90,11 +88,9 @@ class ConstraintEditor extends React.Component<Props> {
                     <div className="graph-settings">
                         <div className="perseus-widget-row">
                             <TeX>y=</TeX>{" "}
-                            <MathInput
-                                buttonsVisible="never"
+                            <MathquillInput
                                 value={this.props.constraintFn}
                                 onChange={this.change("constraintFn")}
-                                analytics={analyticsStub}
                             />
                         </div>
                     </div>
@@ -103,18 +99,14 @@ class ConstraintEditor extends React.Component<Props> {
                 <div className="perseus-widget-row">
                     <div className="perseus-widget-row">
                         <TeX>x \in \Large[</TeX>{" "}
-                        <MathInput
-                            buttonsVisible="never"
+                        <MathquillInput
                             value={this.props.constraintXMin}
                             onChange={this.change("constraintXMin")}
-                            analytics={analyticsStub}
                         />
                         <TeX>, </TeX>{" "}
-                        <MathInput
-                            buttonsVisible="never"
+                        <MathquillInput
                             value={this.props.constraintXMax}
                             onChange={this.change("constraintXMax")}
-                            analytics={analyticsStub}
                         />{" "}
                         <TeX>\Large]</TeX>
                     </div>
@@ -122,18 +114,14 @@ class ConstraintEditor extends React.Component<Props> {
                 <div className="perseus-widget-row">
                     <div className="perseus-widget-row">
                         <TeX>y \in \Large[</TeX>{" "}
-                        <MathInput
-                            buttonsVisible="never"
+                        <MathquillInput
                             value={this.props.constraintYMin}
                             onChange={this.change("constraintYMin")}
-                            analytics={analyticsStub}
                         />
                         <TeX>, </TeX>{" "}
-                        <MathInput
-                            buttonsVisible="never"
+                        <MathquillInput
                             value={this.props.constraintYMax}
                             onChange={this.change("constraintYMax")}
-                            analytics={analyticsStub}
                         />{" "}
                         <TeX>\Large]</TeX>
                     </div>

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

@@ -0,0 +1,108 @@
+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 & {
+    value: string;
+    rangeMin: string;
+    rangeMax: string;
+    color: string;
+    strokeDasharray: string;
+    strokeWidth: number;
+};
+
+type DefaultProps = {
+    value: Props["value"];
+    rangeMin: Props["rangeMin"];
+    rangeMax: Props["rangeMax"];
+    color: Props["color"];
+    strokeDasharray: Props["strokeDasharray"];
+    strokeWidth: Props["strokeWidth"];
+};
+
+// Editor for function plots
+class FunctionEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        value: "x",
+        rangeMin: "-10",
+        rangeMax: "10",
+        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">
+                    {/* @ts-expect-error - TS2339 - Property 'funcName' does not exist on type props. */}
+                    <TeX>{this.props.funcName + "(x)="}</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.value}
+                        onChange={this.change("value")}
+                    />
+                </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 FunctionEditor;

package/src/widgets/interaction-editor/index.ts

@@ -0,0 +1,3 @@
+import InteractionEditor from "./interaction-editor";
+
+export default InteractionEditor;