@khanacademy/perseus-editor 4.1.5 → 4.1.6

package/src/widgets/matrix-editor.tsx

@@ -1,156 +0,0 @@
-/* eslint-disable react/sort-comp */
-import {
-    components,
-    Changeable,
-    EditorJsonify,
-    MatrixWidget,
-} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-import Editor from "../editor";
-
-const {RangeInput} = components;
-const Matrix = MatrixWidget.widget;
-
-// Really large matrices will cause issues with question formatting, so we
-// have to cap it at some point.
-const MAX_BOARD_SIZE = 6;
-
-const getMatrixSize = function (matrix: any) {
-    const matrixSize = [1, 1];
-
-    // We need to find the widest row and tallest column to get the correct
-    // matrix size.
-    _(matrix).each((matrixRow, row) => {
-        let rowWidth = 0;
-        _(matrixRow).each((matrixCol, col) => {
-            if (matrixCol != null && matrixCol.toString().length) {
-                rowWidth = col + 1;
-            }
-        });
-
-        // Matrix width:
-        matrixSize[1] = Math.max(matrixSize[1], rowWidth);
-
-        // Matrix height:
-        if (rowWidth > 0) {
-            matrixSize[0] = Math.max(matrixSize[0], row + 1);
-        }
-    });
-    return matrixSize;
-};
-
-type Props = any;
-
-class MatrixEditor extends React.Component<Props> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        matrixBoardSize: PropTypes.arrayOf(PropTypes.number).isRequired,
-        answers: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
-        prefix: PropTypes.string,
-        suffix: PropTypes.string,
-        cursorPosition: PropTypes.arrayOf(PropTypes.number),
-    };
-
-    static widgetName = "matrix" as const;
-
-    static defaultProps: Props = {
-        matrixBoardSize: [3, 3],
-        answers: [[]],
-        prefix: "",
-        suffix: "",
-        cursorPosition: [0, 0],
-    };
-
-    render(): React.ReactNode {
-        const matrixProps = _.extend(
-            {
-                numericInput: true,
-                onBlur: () => {},
-                onFocus: () => {},
-                trackInteraction: () => {},
-            },
-            this.props,
-        );
-        return (
-            <div className="perseus-matrix-editor">
-                <div className="perseus-widget-row">
-                    {" "}
-                    Max matrix size:{" "}
-                    <RangeInput
-                        value={this.props.matrixBoardSize}
-                        onChange={this.onMatrixBoardSizeChange}
-                        format={this.props.labelStyle}
-                        useArrowKeys={true}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <Matrix {...matrixProps} />
-                </div>
-                <div className="perseus-widget-row">
-                    {" "}
-                    Matrix prefix:{" "}
-                    <Editor
-                        // eslint-disable-next-line react/no-string-refs
-                        ref="prefix"
-                        apiOptions={this.props.apiOptions}
-                        content={this.props.prefix}
-                        widgetEnabled={false}
-                        onChange={(newProps) => {
-                            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                            this.change({prefix: newProps.content});
-                        }}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    {" "}
-                    Matrix suffix:{" "}
-                    <Editor
-                        // eslint-disable-next-line react/no-string-refs
-                        ref="suffix"
-                        apiOptions={this.props.apiOptions}
-                        content={this.props.suffix}
-                        widgetEnabled={false}
-                        onChange={(newProps) => {
-                            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                            this.change({suffix: newProps.content});
-                        }}
-                    />
-                </div>
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    onMatrixBoardSizeChange: (arg1: [number, number]) => void = (range) => {
-        const matrixSize = getMatrixSize(this.props.answers);
-        if (range[0] !== null && range[1] !== null) {
-            range = [
-                Math.round(Math.min(Math.max(range[0], 1), MAX_BOARD_SIZE)),
-                Math.round(Math.min(Math.max(range[1], 1), MAX_BOARD_SIZE)),
-            ];
-            const answers = _(Math.min(range[0], matrixSize[0])).times(
-                (row) => {
-                    return _(Math.min(range[1], matrixSize[1])).times((col) => {
-                        return this.props.answers[row][col];
-                    });
-                },
-            );
-            this.props.onChange({
-                matrixBoardSize: range,
-                answers: answers,
-            });
-        }
-    };
-
-    serialize: () => any = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-export default MatrixEditor;

package/src/widgets/measurer-editor.tsx

@@ -1,253 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* eslint-disable react/sort-comp */
-import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-const {InfoTip, NumberInput, PropCheckBox, RangeInput} = components;
-
-const defaultImage = {
-    url: null,
-    top: 0,
-    left: 0,
-} as const;
-
-type Props = any;
-
-class MeasurerEditor extends React.Component<Props> {
-    static widgetName = "measurer" as const;
-
-    static propTypes = {
-        ...Changeable.propTypes,
-        box: PropTypes.arrayOf(PropTypes.number),
-        image: PropTypes.shape({
-            url: PropTypes.string,
-            top: PropTypes.number,
-            left: PropTypes.number,
-        }),
-        showProtractor: PropTypes.bool,
-        showRuler: PropTypes.bool,
-        rulerLabel: PropTypes.string,
-        rulerTicks: PropTypes.number,
-        rulerPixels: PropTypes.number,
-        rulerLength: PropTypes.number,
-    };
-
-    static defaultProps: Props = {
-        box: [480, 480],
-        image: {},
-        showProtractor: true,
-        showRuler: false,
-        rulerLabel: "",
-        rulerTicks: 10,
-        rulerPixels: 40,
-        rulerLength: 10,
-    };
-
-    className = "perseus-widget-measurer";
-
-    render(): React.ReactNode {
-        const image = _.extend({}, defaultImage, this.props.image);
-
-        return (
-            <div className="perseus-widget-measurer">
-                <div>Image displayed under protractor and/or ruler:</div>
-                <div>
-                    URL:{" "}
-                    <input
-                        type="text"
-                        className="perseus-widget-measurer-url"
-                        // eslint-disable-next-line react/no-string-refs
-                        ref="image-url"
-                        defaultValue={image.url}
-                        onChange={this._changeUrl}
-                    />
-                    <InfoTip>
-                        <p>
-                            Create an image in graphie, or use the "Add image"
-                            function to create a background.
-                        </p>
-                    </InfoTip>
-                </div>
-                {image.url && (
-                    <div className="perseus-widget-row">
-                        <label className="perseus-widget-left-col">
-                            Pixels from top:{" "}
-                            <NumberInput
-                                placeholder={0}
-                                onChange={this._changeTop}
-                                value={image.top}
-                                useArrowKeys={true}
-                            />
-                        </label>
-                        <label className="perseus-widget-right-col">
-                            Pixels from left:{" "}
-                            <NumberInput
-                                placeholder={0}
-                                onChange={this._changeLeft}
-                                value={image.left}
-                                useArrowKeys={true}
-                            />
-                        </label>
-                    </div>
-                )}
-                <div>
-                    Containing area [width, height]:{" "}
-                    <RangeInput
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("box")}
-                        value={this.props.box}
-                        useArrowKeys={true}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <div className="perseus-widget-left-col">
-                        <PropCheckBox
-                            label="Show ruler"
-                            showRuler={this.props.showRuler}
-                            onChange={this.props.onChange}
-                        />
-                    </div>
-                    <div className="perseus-widget-right-col">
-                        <PropCheckBox
-                            label="Show protractor"
-                            showProtractor={this.props.showProtractor}
-                            onChange={this.props.onChange}
-                        />
-                    </div>
-                </div>
-                {this.props.showRuler && (
-                    <div>
-                        <div>
-                            <label>
-                                {" "}
-                                Ruler label:{" "}
-                                <select
-                                    onChange={(e) =>
-                                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
-                                        this.change(
-                                            "rulerLabel",
-                                            e.target.value,
-                                        )
-                                    }
-                                    value={this.props.rulerLabel}
-                                >
-                                    <option value="">None</option>
-                                    <optgroup label="Metric">
-                                        {this.renderLabelChoices([
-                                            ["milimeters", "mm"],
-                                            ["centimeters", "cm"],
-                                            ["meters", "m"],
-                                            ["kilometers", "km"],
-                                        ])}
-                                    </optgroup>
-                                    <optgroup label="Imperial">
-                                        {this.renderLabelChoices([
-                                            ["inches", "in"],
-                                            ["feet", "ft"],
-                                            ["yards", "yd"],
-                                            ["miles", "mi"],
-                                        ])}
-                                    </optgroup>
-                                </select>
-                            </label>
-                        </div>
-                        <div>
-                            <label>
-                                {" "}
-                                Ruler ticks:{" "}
-                                <select
-                                    onChange={(e) =>
-                                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
-                                        this.change(
-                                            "rulerTicks",
-                                            +e.target.value,
-                                        )
-                                    }
-                                    value={this.props.rulerTicks}
-                                >
-                                    {_.map([1, 2, 4, 8, 10, 16], function (n) {
-                                        return (
-                                            <option key={n} value={n}>
-                                                {n}
-                                            </option>
-                                        );
-                                    })}
-                                </select>
-                            </label>
-                        </div>
-                        <div>
-                            <label>
-                                Ruler pixels per unit:{" "}
-                                <NumberInput
-                                    placeholder={40}
-                                    // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                                    onChange={this.change("rulerPixels")}
-                                    value={this.props.rulerPixels}
-                                    useArrowKeys={true}
-                                />
-                            </label>
-                        </div>
-                        <div>
-                            <label>
-                                Ruler length in units:{" "}
-                                <NumberInput
-                                    placeholder={10}
-                                    // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                                    onChange={this.change("rulerLength")}
-                                    value={this.props.rulerLength}
-                                    useArrowKeys={true}
-                                />
-                            </label>
-                        </div>
-                    </div>
-                )}
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    _changeUrl: (arg1: React.ChangeEvent<HTMLInputElement>) => void = (e) => {
-        this._changeImage("url", e.target.value);
-    };
-
-    _changeTop: (arg1: any) => void = (newTop) => {
-        this._changeImage("top", newTop);
-    };
-
-    _changeLeft: (arg1: any) => void = (newLeft) => {
-        this._changeImage("left", newLeft);
-    };
-
-    _changeImage: (arg1: string, arg2: any) => void = (subProp, newValue) => {
-        const image = _.clone(this.props.image);
-        image[subProp] = newValue;
-        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
-        this.change("image", image);
-    };
-
-    renderLabelChoices: (
-        arg1: ReadonlyArray<[string, string]>,
-    ) => ReadonlyArray<React.ReactElement<React.ComponentProps<"option">>> = (
-        choices,
-    ) => {
-        return _.map(choices, function (nameAndValue) {
-            const [name, value] = nameAndValue;
-            return (
-                <option key={value} value={value}>
-                    {name}
-                </option>
-            );
-        });
-    };
-
-    serialize: () => any = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-export default MeasurerEditor;

package/src/widgets/molecule-editor.tsx

@@ -1,64 +0,0 @@
-import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-
-const {NumberInput, TextInput} = components;
-
-type Props = any;
-
-class MoleculeWidgetEditor extends React.Component<Props> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        rotationAngle: PropTypes.number,
-        smiles: PropTypes.string,
-    };
-
-    static widgetName = "molecule-renderer" as const;
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    updateMolecule: (arg1: string) => void = (newValue) => {
-        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-        this.change({smiles: newValue});
-    };
-
-    updateRotation: (arg1: string) => void = (newValue) => {
-        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-        this.change({rotationAngle: newValue});
-    };
-
-    serialize: () => any = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-
-    render(): React.ReactNode {
-        return (
-            <div>
-                <div>
-                    {/* TODO(colin): instead of nbsp hacks, use styles to get
-                    the spacing right. */}
-                    <label>
-                        SMILES:&nbsp;
-                        <TextInput
-                            onChange={this.updateMolecule}
-                            value={this.props.smiles}
-                        />
-                    </label>
-                </div>
-                <div>
-                    <label>
-                        Rotation (deg):&nbsp;
-                        <NumberInput
-                            onChange={this.updateRotation}
-                            value={this.props.rotationAngle}
-                        />
-                    </label>
-                </div>
-            </div>
-        );
-    }
-}
-
-export default MoleculeWidgetEditor;