@khanacademy/perseus 3.0.0 → 4.0.1

package/src/widgets/measurer.jsx

@@ -1,215 +0,0 @@
-/* eslint-disable @babel/no-invalid-this, react/sort-comp */
-// @flow
-import createReactClass from "create-react-class";
-import $ from "jquery";
-import PropTypes from "prop-types";
-import * as React from "react";
-import ReactDOM from "react-dom";
-import _ from "underscore";
-
-import SvgImage from "../components/svg-image.jsx";
-import {ApiOptions} from "../perseus-api.jsx";
-import GraphUtils from "../util/graph-utils.js";
-
-import type {WidgetExports} from "../types.js";
-
-const defaultImage = {
-    url: null,
-    top: 0,
-    left: 0,
-};
-
-const Measurer: $FlowFixMe = createReactClass({
-    displayName: "Measurer",
-
-    propTypes: {
-        apiOptions: ApiOptions.propTypes,
-        box: PropTypes.arrayOf(PropTypes.number),
-        image: PropTypes.shape({
-            url: PropTypes.string,
-            top: PropTypes.number,
-            left: PropTypes.number,
-        }),
-        showProtractor: PropTypes.bool,
-        protractorX: PropTypes.number,
-        protractorY: PropTypes.number,
-        showRuler: PropTypes.bool,
-        rulerLabel: PropTypes.string,
-        rulerTicks: PropTypes.number,
-        rulerPixels: PropTypes.number,
-        rulerLength: PropTypes.number,
-    },
-
-    getDefaultProps: function () {
-        return {
-            box: [480, 480],
-            image: {},
-            showProtractor: true,
-            protractorX: 7.5,
-            protractorY: 0.5,
-            showRuler: false,
-            rulerLabel: "",
-            rulerTicks: 10,
-            rulerPixels: 40,
-            rulerLength: 10,
-        };
-    },
-
-    getInitialState: function () {
-        return {};
-    },
-
-    render: function () {
-        const image = _.extend({}, defaultImage, this.props.image);
-
-        // TODO(scottgrant): This isn't a11y-friendly! We should insist on
-        // finding some valid alt text when this widget is used.
-        return (
-            <div
-                className={
-                    "perseus-widget perseus-widget-measurer " +
-                    "graphie-container above-scratchpad"
-                }
-                style={{width: this.props.box[0], height: this.props.box[1]}}
-            >
-                {image.url && (
-                    <div
-                        style={{
-                            position: "relative",
-                            top: image.top,
-                            left: image.left,
-                        }}
-                    >
-                        {/* $FlowFixMe[prop-missing]: alt prop is missing */}
-                        <SvgImage src={image.url} />
-                    </div>
-                )}
-                {/* eslint-disable-next-line react/no-string-refs */}
-                <div className="graphie" ref="graphieDiv" />
-            </div>
-        );
-    },
-
-    componentDidMount: function () {
-        this.setupGraphie();
-    },
-
-    componentDidUpdate: function (prevProps) {
-        const shouldSetupGraphie = _.any(
-            [
-                "box",
-                "showProtractor",
-                "showRuler",
-                "rulerLabel",
-                "rulerTicks",
-                "rulerPixels",
-                "rulerLength",
-            ],
-            function (prop) {
-                return prevProps[prop] !== this.props[prop];
-            },
-            this,
-        );
-
-        if (shouldSetupGraphie) {
-            this.setupGraphie();
-        }
-    },
-
-    setupGraphie: function () {
-        // eslint-disable-next-line react/no-string-refs
-        const graphieDiv = ReactDOM.findDOMNode(this.refs.graphieDiv);
-        $(graphieDiv).empty();
-        const graphie = (this.graphie = GraphUtils.createGraphie(graphieDiv));
-
-        const scale = [40, 40];
-        const range = [
-            [0, this.props.box[0] / scale[0]],
-            [0, this.props.box[1] / scale[1]],
-        ];
-        graphie.init({
-            range: range,
-            scale: scale,
-        });
-        graphie.addMouseLayer({
-            allowScratchpad: true,
-            setDrawingAreaAvailable:
-                this.props.apiOptions.setDrawingAreaAvailable,
-        });
-
-        if (this.protractor) {
-            this.protractor.remove();
-        }
-
-        if (this.props.showProtractor) {
-            this.protractor = graphie.protractor([
-                this.props.protractorX,
-                this.props.protractorY,
-            ]);
-        }
-
-        if (this.ruler) {
-            this.ruler.remove();
-        }
-
-        if (this.props.showRuler) {
-            this.ruler = graphie.ruler({
-                center: [
-                    (range[0][0] + range[0][1]) / 2,
-                    (range[1][0] + range[1][1]) / 2,
-                ],
-                label: this.props.rulerLabel,
-                pixelsPerUnit: this.props.rulerPixels,
-                ticksPerUnit: this.props.rulerTicks,
-                units: this.props.rulerLength,
-            });
-        }
-    },
-
-    getUserInput: function () {
-        return {};
-    },
-
-    simpleValidate: function (rubric) {
-        // TODO(joel) - I don't understand how this is useful!
-        return Measurer.validate(this.getUserInput(), rubric);
-    },
-
-    focus: $.noop,
-});
-
-_.extend(Measurer, {
-    validate: function (state, rubric) {
-        return {
-            type: "points",
-            earned: 1,
-            total: 1,
-            message: null,
-        };
-    },
-});
-
-const propUpgrades = {
-    "1": (v0props: $FlowFixMe): $FlowFixMe => {
-        const v1props = _(v0props)
-            .chain()
-            .omit("imageUrl", "imageTop", "imageLeft")
-            .extend({
-                image: {
-                    url: v0props.imageUrl,
-                    top: v0props.imageTop,
-                    left: v0props.imageLeft,
-                },
-            })
-            .value();
-        return v1props;
-    },
-};
-
-export default ({
-    name: "measurer",
-    displayName: "Measurer",
-    widget: Measurer,
-    version: {major: 1, minor: 0},
-    propUpgrades: propUpgrades,
-}: WidgetExports<typeof Measurer>);

package/src/widgets/molecule/__tests__/layout_test.jsx

@@ -1,159 +0,0 @@
-// @flow
-import Layout from "../molecule-layout.jsx";
-import SmilesParser from "../smiles-parser.jsx";
-
-function assertApproximately(actual, expected, allowed) {
-    expect(Math.abs(expected - actual) <= allowed).toBeTruthy();
-}
-
-describe("Molecule layout", () => {
-    describe("Simple molecules", () => {
-        const parsedAtoms = SmilesParser.parse("CC");
-        const converted = Layout._convertTree({}, [], parsedAtoms);
-        const atoms = converted[0];
-        const bonds = converted[1];
-
-        describe("Converting the parse tree", () => {
-            it("should convert to a map of atoms and a list of bonds", () => {
-                expect(Object.keys(atoms)).toHaveLength(2);
-                expect(bonds).toHaveLength(1);
-                expect(atoms[bonds[0].from].connections[0]).toBe(bonds[0].to);
-                expect(atoms[bonds[0].to].connections[0]).toBe(bonds[0].from);
-            });
-        });
-
-        describe("Positioning with a single bond", () => {
-            it("should put the first atom at the origin", () => {
-                const atomInfo = Layout._atomLayout(
-                    atoms["1,0"],
-                    atoms,
-                    bonds,
-                    0,
-                );
-                expect(atomInfo.pos).toEqual([0, 0]);
-            });
-
-            it("should put the next atom at a fixed distance", () => {
-                // Direction was arbitrarily chosen, but fixed.
-                Layout._atomLayout(atoms["1,0"], atoms, bonds, 0);
-                const atomInfo = Layout._atomLayout(
-                    atoms["2,0"],
-                    atoms,
-                    bonds,
-                    0,
-                );
-                assertApproximately(atomInfo.pos[0], 0, 1e-14);
-                expect(atomInfo.pos[1]).toBe(Layout._bondLength);
-            });
-
-            it("can rotate", () => {
-                // Direction was arbitrarily chosen, but fixed.
-                Layout._atomLayout(atoms["1,0"], atoms, bonds, 90);
-                const atomInfo = Layout._atomLayout(
-                    atoms["2,0"],
-                    atoms,
-                    bonds,
-                    90,
-                );
-                assertApproximately(atomInfo.pos[0], Layout._bondLength, 1e-14);
-                expect(atomInfo.pos[1]).toBe(0);
-            });
-
-            it("creates the bond betwen the two atoms", () => {
-                Layout._atomLayout(atoms["1,0"], atoms, bonds, 0);
-                Layout._atomLayout(atoms["2,0"], atoms, bonds, 0);
-                const bondInfo = Layout._bondLayout(bonds[0], atoms);
-                expect(bondInfo.startPos).toEqual([0, 0]);
-                expect(bondInfo.endPos[1]).toBe(Layout._bondLength);
-                assertApproximately(bondInfo.endPos[0], 0, 1e-14);
-                expect(bondInfo.type).toBe("line:single");
-            });
-        });
-    });
-
-    describe("Layout at a three-way junction", () => {
-        const layoutItems = Layout.layout(SmilesParser.parse("CC(C)C"), 0);
-        it("should place the second atom in the center", () => {
-            const centerAtom = layoutItems.find((item) => item.idx === "2,0");
-            assertApproximately(centerAtom.pos[0], 0, 1e-14);
-            expect(centerAtom.pos[1]).toBe(Layout._bondLength);
-        });
-
-        it("should place the branched atom at +60 degrees", () => {
-            const branchedAtom = layoutItems.find(
-                (item) => item.idx === "2,1:1,0",
-            );
-            assertApproximately(
-                branchedAtom.pos[0],
-                (Math.sqrt(3) / 2) * Layout._bondLength,
-                1e-14,
-            );
-            assertApproximately(
-                branchedAtom.pos[1],
-                1.5 * Layout._bondLength,
-                1e-14,
-            );
-        });
-
-        it("should place the next atom in the backbone at -60 degrees", () => {
-            const nextAtom = layoutItems.find((item) => item.idx === "3,0");
-            assertApproximately(
-                nextAtom.pos[0],
-                ((-1 * Math.sqrt(3)) / 2) * Layout._bondLength,
-                1e-14,
-            );
-            assertApproximately(
-                nextAtom.pos[1],
-                1.5 * Layout._bondLength,
-                1e-14,
-            );
-        });
-    });
-
-    describe("Layout at a four-way junction", () => {
-        const layoutItems = Layout.layout(SmilesParser.parse("CC(C)(C)C"), 0);
-        it("should place the second atom in the center", () => {
-            const centerAtom = layoutItems.find((item) => item.idx === "2,0");
-            assertApproximately(centerAtom.pos[0], 0, 1e-7);
-            expect(centerAtom.pos[1]).toBe(Layout._bondLength);
-        });
-
-        it("should place the branched atom at +90 degrees", () => {
-            const branchedAtom = layoutItems.find(
-                (item) => item.idx === "2,1:1,0",
-            );
-            assertApproximately(branchedAtom.pos[0], Layout._bondLength, 1e-7);
-            assertApproximately(branchedAtom.pos[1], Layout._bondLength, 1e-7);
-        });
-
-        it("should place the second branched atom at 0 degrees", () => {
-            const branchedAtom = layoutItems.find(
-                (item) => item.idx === "2,2:1,0",
-            );
-            assertApproximately(branchedAtom.pos[0], 0, 1e-7);
-            assertApproximately(
-                branchedAtom.pos[1],
-                2 * Layout._bondLength,
-                1e-7,
-            );
-        });
-
-        it("should place the next atom in the backbone at -90 degrees", () => {
-            const nextAtom = layoutItems.find((item) => item.idx === "3,0");
-            assertApproximately(nextAtom.pos[0], -1 * Layout._bondLength, 1e-7);
-            assertApproximately(nextAtom.pos[1], Layout._bondLength, 1e-7);
-        });
-    });
-
-    describe("Triple bond layout", () => {
-        const layoutItems = Layout.layout(SmilesParser.parse("CC#CC"), 0);
-        it("should place all the atoms colinearly", () => {
-            const atoms = layoutItems.filter((item) => item.idx);
-            expect(atoms).toHaveLength(4);
-            atoms.forEach((atom, i) => {
-                assertApproximately(atom.pos[0], 0, 1e-14);
-                assertApproximately(atom.pos[1], i * Layout._bondLength, 1e-14);
-            });
-        });
-    });
-});

package/src/widgets/molecule/__tests__/parser_test.jsx

@@ -1,142 +0,0 @@
-// @flow
-import SmilesParser from "../smiles-parser.jsx";
-
-const parser = SmilesParser.parse;
-
-describe("SMILES parser", () => {
-    describe("single atom parsing", () => {
-        it("should parse a single bare atom", () => {
-            const parsed = parser("C");
-            expect(parsed).toEqual({
-                type: "atom",
-                symbol: "C",
-                bonds: null,
-                idx: [[1, 0]],
-            });
-        });
-
-        it("should parse a bracketed atom", () => {
-            const parsed = parser("[At]");
-            expect(parsed).toEqual({
-                type: "atom",
-                symbol: "At",
-                bonds: null,
-                idx: [[1, 0]],
-            });
-        });
-
-        it("should parse certain common two-letter atoms", () => {
-            const parsed = parser("Br");
-            expect(parsed).toEqual({
-                type: "atom",
-                symbol: "Br",
-                bonds: null,
-                idx: [[1, 0]],
-            });
-        });
-
-        it("should fail to parse an unusual atom when not bracketed", () => {
-            // Arrange
-            // Act
-            const underTest = () => parser("At");
-
-            // Assert
-            expect(underTest).toThrow();
-        });
-    });
-
-    describe("bond parsing", () => {
-        it("should parse a single bond", () => {
-            const parsed = parser("CC");
-            const expectedBond = {
-                type: "bond",
-                bondType: "single",
-                to: {
-                    type: "atom",
-                    symbol: "C",
-                    bonds: null,
-                    idx: [[2, 0]],
-                },
-            };
-            expect(parsed).toEqual({
-                type: "atom",
-                symbol: "C",
-                bonds: [expectedBond],
-                idx: [[1, 0]],
-            });
-        });
-
-        it("should parse a double bond", () => {
-            const parsed = parser("C=C");
-            const expectedBond = {
-                type: "bond",
-                bondType: "double",
-                to: {
-                    type: "atom",
-                    symbol: "C",
-                    bonds: null,
-                    idx: [[2, 0]],
-                },
-            };
-            expect(parsed).toEqual({
-                type: "atom",
-                symbol: "C",
-                bonds: [expectedBond],
-                idx: [[1, 0]],
-            });
-        });
-
-        it("should parse a triple bond", () => {
-            const parsed = parser("C#C");
-            const expectedBond = {
-                type: "bond",
-                bondType: "triple",
-                to: {
-                    type: "atom",
-                    symbol: "C",
-                    bonds: null,
-                    idx: [[2, 0]],
-                },
-            };
-            expect(parsed).toEqual({
-                type: "atom",
-                symbol: "C",
-                bonds: [expectedBond],
-                idx: [[1, 0]],
-            });
-        });
-    });
-
-    describe("branch parsing", () => {
-        it("should parse a branch", () => {
-            const parsed = parser("C(C)C");
-            expect(parsed.bonds).toHaveLength(2);
-            expect(parsed.bonds[0].type).toBe("bond");
-            expect(parsed.bonds[1].type).toBe("bond");
-
-            expect(parsed.bonds[0].to.idx).toEqual([
-                [1, 1],
-                [0, 0],
-            ]);
-            expect(parsed.bonds[1].to.idx).toEqual([[2, 0]]);
-        });
-
-        it("should apply bond modifiers only to one branch", () => {
-            let parsed = parser("C(=O)C");
-            expect(parsed.bonds).toHaveLength(2);
-            expect(parsed.bonds[0].bondType).toBe("double");
-            expect(parsed.bonds[1].bondType).toBe("single");
-            parsed = parser("C(O)=C");
-            expect(parsed.bonds).toHaveLength(2);
-            expect(parsed.bonds[0].bondType).toBe("single");
-            expect(parsed.bonds[1].bondType).toBe("double");
-        });
-
-        it("should error on mismatched parentheses", () => {
-            expect(() => parser("C)")).toThrow();
-            expect(() => parser("C(")).toThrow();
-            expect(() => parser("C(()")).toThrow();
-            expect(() => parser("C())")).toThrow();
-        });
-    });
-});

package/src/widgets/molecule/molecule-drawing.jsx

@@ -1,175 +0,0 @@
-// @flow
-/**
- * Draw some text into a 2D canvas drawing context.
- *
- * Args:
- *     ctx: the 2D drawing context
- *     item: the rendering instruction for the text.  Must look like: {
- *         type: "text",
- *         pos: [x, y],
- *         value: "some text to draw",
- *     }
- *
- */
-function drawText(ctx, item) {
-    if (item.value === null) {
-        return;
-    }
-    ctx.fillStyle = styles.fgColor;
-    ctx.font = styles.font;
-    ctx.fillText(
-        item.value,
-        item.pos[0] - styles.fontSizePx / 2 + 1,
-        item.pos[1] + styles.fontSizePx / 2,
-    );
-}
-
-/**
- * Draw a double line into a 2D canvas drawing context.
- *
- * Apparently the way you do this is to stroke an extra-wide line in the
- * foreground color and then a smaller line in the background color. 5:3
- * foreground:background width looks reasonable for drawing chemical bonds.
- *
- * Args:
- *     ctx: the 2D drawing context
- *     item: the rendering instruction for the line.  Must look like: {
- *         type: "line:double",
- *         startPos: [x, y],
- *         endPos: [x, y],
- *     }
- */
-function drawDoubleLine(ctx, item) {
-    // Outer line that forms both of the bond lines.
-    let path = new Path2D();
-    ctx.lineWidth = 5 * styles.lineWidth;
-    ctx.strokeStyle = styles.fgColor;
-    path.moveTo(item.startPos[0], item.startPos[1]);
-    path.lineTo(item.endPos[0], item.endPos[1]);
-    ctx.stroke(path);
-
-    // Inner white line that separates the two bond lines.
-    path = new Path2D();
-    ctx.lineWidth = 3 * styles.lineWidth;
-    ctx.strokeStyle = styles.bgColor;
-    path.moveTo(item.startPos[0], item.startPos[1]);
-    path.lineTo(item.endPos[0], item.endPos[1]);
-    ctx.stroke(path);
-}
-
-/**
- * Draw a triple line into a 2D canvas drawing context.
- *
- * Following the strategy for the double line, we stroke a very wide
- * foreground-color line, then a medium background-color line, then a narrow
- * foreground-color line.
- *
- * Args:
- *     ctx: the 2D drawing context
- *     item: the rendering instruction for the line.  Must look like: {
- *         type: "line:triple",
- *         startPos: [x, y],
- *         endPos: [x, y],
- *     }
- */
-function drawTripleLine(ctx, item) {
-    // TODO(colin): consolidate duplicated code from the three line drawing
-    // functions.
-
-    // Outer line that will form the two outer bond lines.
-    let path = new Path2D();
-    ctx.lineWidth = 7 * styles.lineWidth;
-    ctx.strokeStyle = styles.fgColor;
-    path.moveTo(item.startPos[0], item.startPos[1]);
-    path.lineTo(item.endPos[0], item.endPos[1]);
-    ctx.stroke(path);
-
-    // Middle white line that separates the bonds
-    path = new Path2D();
-    ctx.lineWidth = 5 * styles.lineWidth;
-    ctx.strokeStyle = styles.bgColor;
-    path.moveTo(item.startPos[0], item.startPos[1]);
-    path.lineTo(item.endPos[0], item.endPos[1]);
-    ctx.stroke(path);
-
-    // Inner line that forms the middle bond line.
-    drawLine(ctx, item);
-}
-
-/**
- * Draw a single line into a 2D canvas drawing context
- *
- * Args:
- *     ctx: the 2D drawing context
- *     item: the rendering instruction for the line.  Must look like: {
- *         type: "line:single",
- *         startPos: [x, y],
- *         endPos: [x, y],
- *     }
- */
-function drawLine(ctx, item) {
-    const path = new Path2D();
-    ctx.lineWidth = styles.lineWidth;
-    ctx.strokeStyle = styles.fgColor;
-    path.moveTo(item.startPos[0], item.startPos[1]);
-    path.lineTo(item.endPos[0], item.endPos[1]);
-    ctx.stroke(path);
-}
-
-/**
- * Lookup table that maps drawing instruction types to the functions that
- * render them.
- */
-const drawingFuncs = {
-    text: drawText,
-    "line:single": drawLine,
-    "line:double": drawDoubleLine,
-    "line:triple": drawTripleLine,
-};
-
-/**
- * Draw a single rendering instruction into a 2D canvas drawing context.
- */
-function drawItem(ctx) {
-    return function (item) {
-        drawingFuncs[item.type](ctx, item);
-    };
-}
-
-/**
- * Lookup table for drawing priorities.
- *
- * Types with lower priorities are drawn first.
- */
-const ordering = {
-    "line:single": 0,
-    "line:double": 0,
-    "line:triple": 0,
-    text: 1,
-};
-
-/**
- * Sorting comparison function that orders rendering instructions according to
- * their type's priority.
- */
-function compareElements(item0, item1) {
-    return ordering[item0.type] - ordering[item1.type];
-}
-
-/**
- * Draw an array of rendering instructions into a 2D canvas drawing context.
- */
-// eslint-disable-next-line ft-flow/no-mutable-array
-function draw(ctx: $FlowFixMe, items: Array<$FlowFixMe>) {
-    items.sort(compareElements).forEach(drawItem(ctx));
-}
-
-const styles = {
-    bgColor: "rgb(255, 255, 255)",
-    fgColor: "rgb(0, 0, 0)",
-    fontSizePx: 12,
-    lineWidth: 1,
-    font: "12px sans",
-};
-
-export default draw;