@khanacademy/perseus 19.1.4 → 19.1.6

package/src/interactive2/__tests__/movable.test.ts

@@ -1,157 +0,0 @@
-/* eslint-disable testing-library/prefer-user-event */
-import {fireEvent} from "@testing-library/react";
-
-import {Graphie} from "../../util/graphie";
-import Movable from "../movable";
-
-// Yay for side-effect imports!
-// eslint-disable-next-line import/no-unassigned-import
-import "../../util/interactive";
-
-describe("Movable", () => {
-    it("should be constructable", () => {
-        const movable = new Movable(
-            new Graphie(document.createElement("div")),
-            {},
-        );
-
-        expect(movable).toBeDefined();
-    });
-
-    it("should have accessor properties", () => {
-        const movable = new Movable(
-            new Graphie(document.createElement("div")),
-            {},
-        );
-
-        expect(typeof movable.isHovering).toBe("function");
-        expect(typeof movable.cursor).toBe("function");
-        expect(typeof movable.added).toBe("function");
-        expect(typeof movable.isHovering).toBe("function");
-        expect(typeof movable.isMouseOver).toBe("function");
-        expect(typeof movable.isDragging).toBe("function");
-        expect(typeof movable.mouseTarget).toBe("function");
-    });
-
-    test("cloneState()", () => {
-        const movable = new Movable(
-            new Graphie(document.createElement("div")),
-            {},
-        );
-
-        expect(movable.cloneState()).toEqual(
-            expect.objectContaining({
-                id: expect.any(String),
-                add: [],
-                added: true,
-                cursor: null,
-                draw: [],
-                isDragging: false,
-                isHovering: false,
-                isMouseOver: false,
-                modify: [],
-                mouseTarget: null,
-                onClick: [],
-                onMove: [],
-                onMoveEnd: [],
-                onMoveStart: [],
-                remove: [],
-            }),
-        );
-    });
-
-    test("cloneState() should copy state", () => {
-        const movable = new Movable(
-            new Graphie(document.createElement("div")),
-            {},
-        );
-
-        expect(movable.cloneState()).not.toBe(movable.state);
-    });
-
-    test("modify() resets movable to initial state when no params given", () => {
-        const movable = new Movable(
-            new Graphie(document.createElement("div")),
-            {},
-        );
-
-        const state = movable.cloneState();
-        movable.state.added = false;
-
-        // It seems that all usages of this function in our production code
-        // pass the original state + mutations to modify(). However, it _does_
-        // work to pass no arguments so we'll keep this Characterization test
-        // here for now.
-        movable.modify();
-
-        expect(movable.cloneState()).toEqual(state);
-    });
-
-    test("modify() retains original ID", () => {
-        const movable = new Movable(
-            new Graphie(document.createElement("div")),
-            {},
-        );
-        const id = movable.state.id;
-
-        movable.modify({added: true});
-
-        expect(movable.state.id).toBe(id);
-    });
-
-    test("grab() fires onMoveStart", () => {
-        const graphie = new Graphie(document.createElement("div"));
-        graphie.init({
-            range: [
-                [-10, 10],
-                [-10, 10],
-            ],
-        });
-        const onMoveStart = jest.fn();
-        const movable = new Movable(graphie, {onMoveStart});
-
-        movable.grab([0, 0]);
-
-        expect(onMoveStart).toHaveBeenCalledWith([0, 0], [0, 0]);
-    });
-
-    test("grab() fires onMove when mouse moves", () => {
-        const graphie = new Graphie(document.createElement("div"));
-        graphie.init({
-            range: [
-                [-10, 10],
-                [-10, 10],
-            ],
-            scale: [10, 10],
-        });
-        const onMove = jest.fn();
-        const movable = new Movable(graphie, {onMove});
-
-        movable.grab([0, 0]);
-        fireEvent.mouseMove(document, {clientX: 120, clientY: 80});
-
-        expect(onMove).toHaveBeenCalledWith([2, 2], [0, 0]);
-    });
-
-    test("grab() fires onMoveEnd when mouse up", () => {
-        const dummyGraphie: any = {};
-        const onMoveEnd = jest.fn();
-        const movable = new Movable(dummyGraphie, {onMoveEnd});
-
-        movable.grab([0, 0]);
-        fireEvent.mouseUp(document);
-
-        expect(onMoveEnd).toHaveBeenCalledWith([0, 0], [0, 0]);
-    });
-
-    test("grab() fires onClick if still hovering when mouse up", () => {
-        const dummyGraphie: any = {};
-        const onClick = jest.fn();
-        const movable = new Movable(dummyGraphie, {onClick});
-
-        movable.grab([0, 0]);
-        fireEvent.mouseUp(document);
-
-        expect(onClick).toHaveBeenCalledWith([0, 0], [0, 0]);
-    });
-});

package/src/interactive2/interactive-util.test.ts

@@ -1,93 +0,0 @@
-import InteractiveUtil from "./interactive-util";
-
-describe("normalizeOptions", () => {
-    it("wraps single functions in arrays", () => {
-        const options = {
-            add: () => {},
-            modify: () => {},
-            draw: () => {},
-            remove: () => {},
-            constraints: () => {},
-            onMoveStart: () => {},
-            onMove: () => {},
-            onMoveEnd: () => {},
-            onClick: () => {},
-        };
-        expect(InteractiveUtil.normalizeOptions(options)).toEqual({
-            add: [options.add],
-            modify: [options.modify],
-            draw: [options.draw],
-            remove: [options.remove],
-            constraints: [options.constraints],
-            onMoveStart: [options.onMoveStart],
-            onMove: [options.onMove],
-            onMoveEnd: [options.onMoveEnd],
-            onClick: [options.onClick],
-        });
-    });
-
-    it("tolerates missing properties", () => {
-        const options = {
-            add: () => {},
-        };
-        expect(InteractiveUtil.normalizeOptions(options)).toEqual({
-            add: [options.add],
-        });
-    });
-
-    it("ignores extra properties", () => {
-        const options = {
-            foo: () => {},
-        };
-        expect(InteractiveUtil.normalizeOptions(options)).toEqual({
-            foo: options.foo,
-        });
-    });
-
-    it("does not modify its argument", () => {
-        const options = {
-            add: () => {},
-        };
-        const optionsCopy = {...options};
-        InteractiveUtil.normalizeOptions(options);
-        expect(options).toEqual(optionsCopy);
-    });
-
-    it("leaves existing arrays of functions alone", () => {
-        const options = {
-            add: [() => {}],
-            modify: [() => {}],
-            draw: [() => {}],
-            remove: [() => {}],
-            onMoveStart: [() => {}],
-            onMove: [() => {}],
-            onMoveEnd: [() => {}],
-            onClick: [() => {}],
-        };
-        expect(InteractiveUtil.normalizeOptions(options)).toEqual(options);
-    });
-
-    it("flattens arrays", () => {
-        const dummyFunction = () => {};
-        const options = {
-            add: [[dummyFunction]],
-            modify: [[dummyFunction]],
-            draw: [[dummyFunction]],
-            remove: [[dummyFunction]],
-            onMoveStart: [[dummyFunction]],
-            onMove: [[dummyFunction]],
-            onMoveEnd: [[dummyFunction]],
-            onClick: [[dummyFunction]],
-        };
-        expect(InteractiveUtil.normalizeOptions(options)).toEqual({
-            add: [dummyFunction],
-            modify: [dummyFunction],
-            draw: [dummyFunction],
-            remove: [dummyFunction],
-            onMoveStart: [dummyFunction],
-            onMove: [dummyFunction],
-            onMoveEnd: [dummyFunction],
-            onClick: [dummyFunction],
-        });
-    });
-});

package/src/interactive2/interactive-util.ts

@@ -1,159 +0,0 @@
-/**
- * Utility functions for writing Interactive2 movablethings
- */
-
-import _ from "underscore";
-
-import {Errors} from "../logging/log";
-import {PerseusError} from "../perseus-error";
-
-import MovableHelperMethods from "./movable-helper-methods";
-
-/**
- * Compute the correct vendor-prefixed `transform`.
- */
-let prefixedTransform = null;
-function computePrefixedTransform(): string | null | undefined {
-    // Temporary element for testing prefix validity
-    const el = document.createElement("div");
-
-    const prefixes = [
-        "transform",
-        "msTransform",
-        "MozTransform",
-        "WebkitTransform",
-        "OTransform",
-    ];
-    let correctPrefix = null;
-    _.each(prefixes, function (prefix) {
-        if (typeof el.style[prefix] !== "undefined") {
-            // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
-            correctPrefix = prefix;
-        }
-    });
-
-    return correctPrefix;
-}
-
-/**
- * Compute whether the browser can use 3d transforms by trying to use the
- * translateZ transformation.
- */
-let canUse3dTransform = null;
-function computeCanUse3dTransform(): boolean {
-    const el = document.createElement("div");
-
-    const prefix = InteractiveUtil.getPrefixedTransform();
-
-    // Prefix could be null.
-    // @ts-expect-error - TS2538 - Type 'null' cannot be used as an index type. | TS2538 - Type 'undefined' cannot be used as an index type.
-    el.style[prefix] = "translateZ(0px)";
-    // @ts-expect-error - TS2538 - Type 'null' cannot be used as an index type. | TS2538 - Type 'undefined' cannot be used as an index type.
-    return !!el.style[prefix];
-}
-
-const FUNCTION_ARRAY_OPTIONS = [
-    "add",
-    "modify",
-    "draw",
-    "remove",
-    "constraints",
-    "onMoveStart",
-    "onMove",
-    "onMoveEnd",
-    "onClick",
-];
-
-const InteractiveUtil = {
-    assert: function (isTrue: boolean, message?: string) {
-        if (!isTrue) {
-            throw new PerseusError(
-                "Assertion Error" + (message ? ": " + message : ""),
-                Errors.Internal,
-            );
-        }
-    },
-
-    /**
-     * Create getters for this.state, based on the default state, `defaults`
-     */
-    createGettersFor: function (Class: any, defaults: Record<any, any>) {
-        _.each(_.keys(defaults), function (key) {
-            if (Class.prototype[key] === undefined) {
-                Class.prototype[key] = function () {
-                    return this.state[key];
-                };
-            }
-        });
-    },
-
-    /**
-     * Add MovableHelperMethods methods to a MovableThing class
-     */
-    addMovableHelperMethodsTo: function (Class: any) {
-        _.each(MovableHelperMethods, function (methodFunc, methodName) {
-            if (Class.prototype[methodName] === undefined) {
-                Class.prototype[methodName] = methodFunc;
-            }
-        });
-    },
-
-    /**
-     * Turn a function or an array of functions into an array of functions
-     */
-    arrayify: function (
-        funcOrArray:
-            | ((...args: ReadonlyArray<unknown>) => unknown)
-            | ReadonlyArray<unknown>,
-    ): ReadonlyArray<unknown> {
-        if (funcOrArray == null) {
-            return [];
-        }
-        if (_.isArray(funcOrArray)) {
-            return _.filter(_.flatten(funcOrArray), _.identity);
-        }
-        return [funcOrArray];
-    },
-
-    /**
-     * Convert all function-or-array arguments to arrays of functions
-     */
-    normalizeOptions: function (options: Record<any, any>): Record<any, any> {
-        const result = {...options};
-        FUNCTION_ARRAY_OPTIONS.forEach(function (eventName) {
-            // Only propagate values which were set; not present values
-            // shouldn't be added to options because we'd like them to
-            // fall through to defaults
-            if (options[eventName] !== undefined) {
-                result[eventName] = InteractiveUtil.arrayify(
-                    options[eventName],
-                );
-            }
-        });
-        return result;
-    },
-
-    /**
-     * Get the correct vendor-prefixed `transform`.
-     */
-    getPrefixedTransform: function (): string | null | undefined {
-        // Cache result to avoid re-computation
-        // @ts-expect-error - TS2322 - Type 'string | null | undefined' is not assignable to type 'null'.
-        prefixedTransform = prefixedTransform || computePrefixedTransform();
-        return prefixedTransform;
-    },
-
-    /**
-     * Get whether the browser can use 3d transforms.
-     */
-    getCanUse3dTransform: function (): boolean {
-        if (canUse3dTransform == null) {
-            // @ts-expect-error - TS2322 - Type 'boolean' is not assignable to type 'null'.
-            canUse3dTransform = computeCanUse3dTransform();
-        }
-        // @ts-expect-error - TS2322 - Type 'null' is not assignable to type 'boolean'.
-        return canUse3dTransform;
-    },
-} as const;
-
-export default InteractiveUtil;

package/src/interactive2/movable-helper-methods.ts

@@ -1,166 +0,0 @@
-/* eslint-disable @babel/no-invalid-this */
-/**
- * MovableThing convenience methods
- *
- * Usually added to a Movable* class through
- * InteractiveUtils.addMovableHelperMethodsTo(), but these implementations
- * are simply for convenience.
- */
-
-import {point as kpoint} from "@khanacademy/kmath";
-import _ from "underscore";
-
-import {Errors} from "../logging/log";
-import {PerseusError} from "../perseus-error";
-
-/* Local helper methods. */
-
-function getKey(eventName: any, id: any) {
-    return eventName + ":" + id;
-}
-
-function getEventName(key) {
-    return key.split(":")[0];
-}
-
-const MovableHelperMethods: any = {
-    /**
-     * Fire an onSomething type event to all functions in listeners
-     */
-    _fireEvent: function <F extends (...args: any[]) => any>(
-        listeners: F[],
-        ...args: Parameters<F>
-    ) {
-        for (const listener of listeners) {
-            listener.call(this, ...args);
-        }
-    },
-
-    /**
-     * Combine the array of constraints functions
-     * Returns either an [x, y] coordinate or false
-     */
-    _applyConstraints: function (current, previous, extraOptions) {
-        let skipRemaining = false;
-
-        return _.reduce(
-            this.state.constraints,
-            (memo, constraint) => {
-                // A move that has been cancelled won't be propagated to later
-                // constraints calls
-                if (memo === false) {
-                    return false;
-                }
-
-                if (skipRemaining) {
-                    return memo;
-                }
-
-                const result = constraint.call(this, memo, previous, {
-                    onSkipRemaining: () => {
-                        skipRemaining = true;
-                    },
-                    ...extraOptions,
-                });
-
-                if (result === false) {
-                    // Returning false cancels the move
-                    return false;
-                }
-                if (kpoint.is(result, 2)) {
-                    // Returning a coord from constraints overrides the move
-                    return result;
-                }
-                if (result === true || result == null) {
-                    // Returning true or undefined allow the move to occur
-                    return memo;
-                }
-                // Anything else is an error
-                throw new PerseusError(
-                    "Constraint returned invalid result: " + result,
-                    Errors.Internal,
-                );
-            },
-            current,
-            this,
-        );
-    },
-
-    /**
-     * Call all draw functions, and update our prevState for the next
-     * draw function
-     */
-    draw: function () {
-        const currState = this.cloneState();
-        MovableHelperMethods._fireEvent.call(
-            this,
-            this.state.draw,
-            currState,
-            this.prevState,
-        );
-        this.prevState = currState;
-    },
-
-    /**
-     * Add a listener to any event: startMove, constraints, onMove, onMoveEnd,
-     * etc. If a listener is already bound to the given eventName and id, then
-     * it is overwritten by func.
-     *
-     * eventName: the string name of the event to listen to. one of:
-     *   "onMoveStart", "onMove", "onMoveEnd", "draw", "remove"
-     *
-     * id: a string id that can be used to remove this event at a later time
-     *   note: adding multiple listeners with the same id is undefined behavior
-     *
-     * func: the function to call when the event happens, which is called
-     *   with the event's standard parameters [usually (coord, prevCoord) or
-     *   (state, prevState)]
-     */
-    listen: function (eventName, id, func) {
-        this._listenerMap = this._listenerMap || {};
-
-        // If there's an existing handler, replace it by using its index in
-        // `this.state[eventName]`; otherwise, add this handler to the end
-        const key = getKey(eventName, id);
-        const index = (this._listenerMap[key] =
-            this._listenerMap[key] || this.state[eventName].length);
-        this.state[eventName][index] = func;
-    },
-
-    /**
-     * Remove a previously added listener, by the id specified in the
-     * corresponding listen() call
-     *
-     * If the given id has not been registered already, this is a no-op
-     */
-    unlisten: function (eventName, id) {
-        this._listenerMap = this._listenerMap || {};
-
-        const key = getKey(eventName, id);
-        const index = this._listenerMap[key];
-        if (index !== undefined) {
-            // Remove handler from list of event handlers and listenerMap
-            this.state[eventName].splice(index, 1);
-            delete this._listenerMap[key];
-
-            // Re-index existing events: if they occur after `index`, decrement
-            const keys = _.keys(this._listenerMap);
-            _.each(
-                keys,
-                function (key) {
-                    if (
-                        getEventName(key) === eventName &&
-                        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                        this._listenerMap[key] > index
-                    ) {
-                        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                        this._listenerMap[key]--;
-                    }
-                },
-                this,
-            );
-        }
-    },
-};
-
-export default MovableHelperMethods;