@khanacademy/perseus-editor 0.0.1 → 0.1.2

package/src/widgets/measurer-editor.jsx

@@ -0,0 +1,245 @@
+/* eslint-disable react/sort-comp */
+// @flow
+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,
+};
+
+type Props = $FlowFixMe;
+
+class MeasurerEditor extends React.Component<Props> {
+    static widgetName: "measurer" = "measurer";
+
+    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: string = "perseus-widget-measurer";
+
+    render(): React.Node {
+        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
+                        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) =>
+                                        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) =>
+                                        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}
+                                    onChange={this.change("rulerPixels")}
+                                    value={this.props.rulerPixels}
+                                    useArrowKeys={true}
+                                />
+                            </label>
+                        </div>
+                        <div>
+                            <label>
+                                Ruler length in units:{" "}
+                                <NumberInput
+                                    placeholder={10}
+                                    onChange={this.change("rulerLength")}
+                                    value={this.props.rulerLength}
+                                    useArrowKeys={true}
+                                />
+                            </label>
+                        </div>
+                    </div>
+                )}
+            </div>
+        );
+    }
+
+    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    _changeUrl: (SyntheticInputEvent<>) => void = (e) => {
+        this._changeImage("url", e.target.value);
+    };
+
+    _changeTop: ($FlowFixMe) => void = (newTop) => {
+        this._changeImage("top", newTop);
+    };
+
+    _changeLeft: ($FlowFixMe) => void = (newLeft) => {
+        this._changeImage("left", newLeft);
+    };
+
+    _changeImage: (string, $FlowFixMe) => void = (subProp, newValue) => {
+        const image = _.clone(this.props.image);
+        image[subProp] = newValue;
+        this.change("image", image);
+    };
+
+    renderLabelChoices: (
+        $ReadOnlyArray<[string, string]>,
+    ) => $ReadOnlyArray<React.Element<"option">> = (choices) => {
+        return _.map(choices, function (nameAndValue) {
+            const [name, value] = nameAndValue;
+            return (
+                <option key={value} value={value}>
+                    {name}
+                </option>
+            );
+        });
+    };
+
+    serialize: () => $FlowFixMe = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+}
+
+export default MeasurerEditor;

package/src/widgets/molecule-editor.jsx

@@ -0,0 +1,63 @@
+// @flow
+import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+
+const {NumberInput, TextInput} = components;
+
+type Props = $FlowFixMe;
+
+class MoleculeWidgetEditor extends React.Component<Props> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        rotationAngle: PropTypes.number,
+        smiles: PropTypes.string,
+    };
+
+    static widgetName: "molecule-renderer" = "molecule-renderer";
+
+    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    updateMolecule: (string) => void = (newValue) => {
+        this.change({smiles: newValue});
+    };
+
+    updateRotation: (string) => void = (newValue) => {
+        this.change({rotationAngle: newValue});
+    };
+
+    serialize: () => $FlowFixMe = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.Node {
+        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;