@khanacademy/perseus-editor 2.15.4 → 2.15.5

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

@@ -0,0 +1,26 @@
+import PropTypes from "prop-types";
+import * as React from "react";
+type FunctionEditorProps = any;
+declare class FunctionEditor extends React.Component<FunctionEditorProps> {
+    static propTypes: {
+        value: PropTypes.Requireable<string>;
+        rangeMin: PropTypes.Requireable<string>;
+        rangeMax: PropTypes.Requireable<string>;
+        color: PropTypes.Requireable<string>;
+        strokeDashArray: PropTypes.Requireable<string>;
+        strokeWidth: PropTypes.Requireable<number>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        value: string;
+        rangeMin: string;
+        rangeMax: string;
+        color: "#6495ED";
+        strokeDasharray: string;
+        strokeWidth: number;
+    };
+    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/label-editor.d.ts

@@ -0,0 +1,22 @@
+import PropTypes from "prop-types";
+import * as React from "react";
+type LabelEditorProps = any;
+declare class LabelEditor extends React.Component<LabelEditorProps> {
+    static propTypes: {
+        color: PropTypes.Requireable<string>;
+        coordX: PropTypes.Requireable<string>;
+        coordY: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        coordX: string;
+        coordY: string;
+        color: "black";
+        label: string;
+    };
+    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,30 @@
+import PropTypes from "prop-types";
+import * as React from "react";
+type LineEditorProps = any;
+declare class LineEditor extends React.Component<LineEditorProps> {
+    static propTypes: {
+        startX: PropTypes.Requireable<string>;
+        startY: PropTypes.Requireable<string>;
+        endX: PropTypes.Requireable<string>;
+        endY: PropTypes.Requireable<string>;
+        color: PropTypes.Requireable<string>;
+        strokeDasharray: PropTypes.Requireable<string>;
+        arrows: PropTypes.Requireable<string>;
+        strokeWidth: PropTypes.Requireable<number>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        startX: string;
+        startY: string;
+        endX: string;
+        endY: string;
+        color: "black";
+        strokeDasharray: string;
+        arrows: string;
+        strokeWidth: number;
+    };
+    change: (arg1: any, arg2?: any, arg3?: any) => any;
+    serialize: () => any;
+    render(): React.ReactNode;
+}
+export default LineEditor;

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

@@ -0,0 +1,32 @@
+import PropTypes from "prop-types";
+import * as React from "react";
+type MovableLineEditorProps = any;
+declare class MovableLineEditor extends React.Component<MovableLineEditorProps> {
+    static propTypes: {
+        startX: PropTypes.Requireable<string>;
+        startY: PropTypes.Requireable<string>;
+        endX: PropTypes.Requireable<string>;
+        endY: PropTypes.Requireable<string>;
+        constraint: PropTypes.Requireable<string>;
+        snap: PropTypes.Requireable<number>;
+        constraintFn: PropTypes.Requireable<string>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        startX: string;
+        startY: string;
+        endX: string;
+        endY: string;
+        constraint: string;
+        snap: number;
+        constraintFn: string;
+        constraintXMin: string;
+        constraintXMax: string;
+        constraintYMin: string;
+        constraintYMax: string;
+    };
+    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,28 @@
+import PropTypes from "prop-types";
+import * as React from "react";
+type MovablePointEditorProps = any;
+declare class MovablePointEditor extends React.Component<MovablePointEditorProps> {
+    static propTypes: {
+        startX: PropTypes.Requireable<string>;
+        startY: PropTypes.Requireable<string>;
+        constraint: PropTypes.Requireable<string>;
+        snap: PropTypes.Requireable<number>;
+        constraintFn: PropTypes.Requireable<string>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        startX: string;
+        startY: string;
+        constraint: string;
+        snap: number;
+        constraintFn: string;
+        constraintXMin: string;
+        constraintXMax: string;
+        constraintYMin: string;
+        constraintYMax: string;
+    };
+    change: (...args: any[]) => any;
+    serialize: () => any;
+    render(): React.ReactNode;
+}
+export default MovablePointEditor;

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

@@ -0,0 +1,28 @@
+import PropTypes from "prop-types";
+import * as React from "react";
+type ParametricEditorProps = any;
+declare class ParametricEditor extends React.Component<ParametricEditorProps> {
+    static propTypes: {
+        x: PropTypes.Requireable<string>;
+        y: PropTypes.Requireable<string>;
+        rangeMin: PropTypes.Requireable<string>;
+        rangeMax: PropTypes.Requireable<string>;
+        color: PropTypes.Requireable<string>;
+        strokeDashArray: PropTypes.Requireable<string>;
+        strokeWidth: PropTypes.Requireable<number>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        x: string;
+        y: string;
+        rangeMin: string;
+        rangeMax: string;
+        color: "#6495ED";
+        strokeDasharray: string;
+        strokeWidth: number;
+    };
+    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,20 @@
+import PropTypes from "prop-types";
+import * as React from "react";
+type PointEditorProps = any;
+declare class PointEditor extends React.Component<PointEditorProps> {
+    static propTypes: {
+        coordX: PropTypes.Requireable<string>;
+        coordY: PropTypes.Requireable<string>;
+        color: PropTypes.Requireable<string>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        coordX: string;
+        coordY: string;
+        color: "black";
+    };
+    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,24 @@
+import PropTypes from "prop-types";
+import * as React from "react";
+type RectangleEditorProps = any;
+declare class RectangleEditor extends React.Component<RectangleEditorProps> {
+    static propTypes: {
+        color: PropTypes.Requireable<string>;
+        coordX: PropTypes.Requireable<string>;
+        coordY: PropTypes.Requireable<string>;
+        height: PropTypes.Requireable<string>;
+        width: PropTypes.Requireable<string>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        coordX: string;
+        coordY: string;
+        width: string;
+        height: string;
+        color: "#9AB8ED";
+    };
+    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.5",
     "publishConfig": {
         "access": "public"
     },
@@ -24,7 +24,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.7",
         "@khanacademy/kmath": "^0.1.8",
-        "@khanacademy/perseus": "^17.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,24 @@
+import {ApiOptions} from "@khanacademy/perseus";
+import {action} from "@storybook/addon-actions";
+import * as React 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 => {
+    return (
+        <InteractionEditor
+            onChange={action("onChange")}
+            apiOptions={ApiOptions.defaults}
+        />
+    );
+};

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

@@ -0,0 +1,111 @@
+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 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,
+    };
+
+    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>{this.props.funcName + "(x)="}</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.value}
+                        onChange={this.change("value")}
+                        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 FunctionEditor;

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

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