@khanacademy/perseus 19.1.5 → 19.1.7

package/src/interactive2/movable.ts

@@ -1,437 +0,0 @@
-/**
- * Movable
- *
- * A Movable Something, that sends onMove events based on the
- * mouse coordinate (graphie unscaled, non-pixel-value) of the
- * move.
- *
- * Other MovableThings should generally have a Movable field, and
- * let this class handle all of the virtual mouse events, and then
- * take appropriate action in onMoveStart, onMove, onMoveEnd
- */
-import {point as kpoint} from "@khanacademy/kmath";
-import $ from "jquery";
-import _ from "underscore";
-
-import {Errors} from "../logging/log";
-import {PerseusError} from "../perseus-error";
-
-import InteractiveUtil from "./interactive-util";
-
-import type {Constraint, ConstraintCallbacks, Coord} from "./types";
-import type {Graphie} from "../util/graphie";
-
-const normalizeOptions = InteractiveUtil.normalizeOptions;
-
-const assert = InteractiveUtil.assert;
-
-// Default "props" and "state". Both are added to this.state.
-// However, properties in DEFAULT_PROPS are updated on `modify()`,
-// while those in DEFAULT_STATE persist and are not updated.
-// Things that the user might want to change should be on "props",
-// while things used to render the movable should be on "state".
-const DEFAULT_PROPS = {
-    cursor: null,
-} as const;
-const DEFAULT_STATE = {
-    added: false,
-    isHovering: false,
-    isMouseOver: false,
-    isDragging: false,
-    mouseTarget: null,
-} as const;
-
-export interface State {
-    added?: boolean;
-    isHovering?: boolean;
-    isMouseOver?: boolean;
-    isDragging?: boolean;
-    mouseTarget?: {
-        toFront(): void;
-        toBack(): void;
-        remove(): void;
-        getMouseTarget(): Element;
-    } | null;
-    // TODO(benchristel): I don't think cursor is used
-    cursor?: null;
-    id: string;
-    add?: (() => void)[];
-    // TODO(benchristel): I don't see any evidence that implementers of
-    // modify do anything with the second argument. Remove it?
-    modify?: ((state: State, prevState?: State) => void)[];
-    draw?: ((state: State, prevState?: State) => void)[];
-    remove?: (() => void)[];
-    // TODO(benchristel): callers pass the position twice to onMoveStart.
-    // But I don't see any implementers expecting two arguments. Remove the
-    // second argument.
-    onMoveStart?: ((position: Coord, positionAgain: Coord) => void)[];
-    onMove?: ((end: Coord, start: Coord) => void)[];
-    onMoveEnd?: ((end: Coord, start: Coord) => void)[];
-    onClick?: ((position: Coord, start: Coord) => void)[];
-    constraints?: Constraint[];
-}
-
-export class Movable<Options extends Record<string, any>> {
-    graphie: Graphie;
-    state: State;
-    prevState: State | undefined;
-    // TODO(benchristel): delete _listenerMap; it's unused
-    _listenerMap: Record<string, number> = {};
-
-    constructor(graphie: Graphie, options: Options) {
-        this.graphie = graphie;
-        this.state = {
-            id: _.uniqueId("movable"),
-        };
-        this.modify({...DEFAULT_STATE, ...options});
-    }
-
-    modify(options: Options) {
-        this.update({...this._createDefaultState(), ...options});
-    }
-
-    _createDefaultState() {
-        return {
-            id: this.state.id,
-            add: [],
-            modify: [],
-            draw: [],
-            remove: [],
-            onMoveStart: [],
-            onMove: [],
-            onMoveEnd: [],
-            onClick: [],
-
-            // We only update props here, because we want things on state to
-            // be persistent, and updated appropriately in modify()
-            ...DEFAULT_PROPS,
-        };
-    }
-
-    update(options: Options) {
-        const graphie = this.graphie;
-
-        const prevState = this.cloneState();
-        const state = Object.assign(this.state, normalizeOptions(options));
-
-        // the invisible shape in front of the point that gets mouse events
-        if (state.mouseTarget && !prevState.mouseTarget) {
-            let $mouseTarget;
-            if (state.mouseTarget.getMouseTarget) {
-                $mouseTarget = $(state.mouseTarget.getMouseTarget());
-            } else {
-                $mouseTarget = $(state.mouseTarget[0]);
-            }
-
-            const isMouse = !("ontouchstart" in window);
-
-            if (isMouse) {
-                $mouseTarget.on("vmouseover", () => {
-                    state.isMouseOver = true;
-                    if (!graphie.isDragging) {
-                        state.isHovering = true;
-                    }
-                    if (this.state.added) {
-                        // Avoid drawing if the point has been removed
-                        this.draw();
-                    }
-                });
-
-                $mouseTarget.on("vmouseout", () => {
-                    state.isMouseOver = false;
-                    if (!state.isDragging) {
-                        state.isHovering = false;
-                    }
-                    if (this.state.added) {
-                        // Avoid drawing if the point has been removed
-                        this.draw();
-                    }
-                });
-            }
-
-            // Prevent the page from scrolling when we grab and drag the
-            // movable object on a mobile device.
-            $mouseTarget[0].addEventListener(
-                "touchstart",
-                function (event) {
-                    event.preventDefault();
-                },
-                {passive: false},
-            );
-
-            $mouseTarget.on("vmousedown", (e) => {
-                if (e.which !== 0 && e.which !== 1) {
-                    return;
-                }
-                e.preventDefault();
-
-                const mouseCoord = graphie.getMouseCoord(e);
-                this.grab(mouseCoord);
-            });
-        }
-
-        if (state.mouseTarget && state.cursor !== undefined) {
-            let $mouseTarget;
-            if (state.mouseTarget.getMouseTarget) {
-                $mouseTarget = $(state.mouseTarget.getMouseTarget());
-            } else {
-                $mouseTarget = $(state.mouseTarget[0]);
-            }
-
-            // "" removes the css cursor if state.cursor is null
-            $mouseTarget.css("cursor", state.cursor || "");
-        }
-
-        // Trigger an add event if this hasn't been added before
-        if (!state.added) {
-            // TODO(benchristel): No one seems to handle the modify event. Can
-            // we delete this?
-            // @ts-expect-error - TS2345: Argument of type '{}' is not assignable to parameter of type 'State'.
-            this._fireEvent(state.modify, this.cloneState(), {});
-            state.added = true;
-
-            // Update the state for `added` and in case the add event
-            // changed it
-            this.prevState = this.cloneState();
-        }
-
-        // Trigger a modify event
-        this._fireEvent(state.modify, this.cloneState(), this.prevState);
-    }
-
-    cloneState(): State {
-        return {...this.state};
-    }
-
-    /**
-     * Fire an onSomething type event to all functions in listeners
-     */
-    _fireEvent<F extends (...args: any[]) => any>(
-        listeners: F[] | undefined,
-        ...args: Parameters<F>
-    ) {
-        if (listeners == null) {
-            return;
-        }
-        for (const listener of listeners) {
-            listener.call(this, ...args);
-        }
-    }
-
-    /**
-     * Call all draw functions, and update our prevState for the next
-     * draw function
-     */
-    draw() {
-        const currState = this.cloneState();
-        this._fireEvent(this.state.draw, currState, this.prevState);
-        this.prevState = currState;
-    }
-
-    /**
-     * Simulates a mouse grab event on the movable object.
-     */
-    grab(coord: Coord) {
-        assert(kpoint.is(coord));
-        const graphie = this.graphie;
-        const state: State = this.state;
-
-        state.isHovering = true;
-        state.isDragging = true;
-        graphie.isDragging = true;
-
-        const startMouseCoord = coord;
-        let prevMouseCoord = startMouseCoord;
-        this._fireEvent(state.onMoveStart, startMouseCoord, startMouseCoord);
-
-        const moveHandler = (
-            e: Readonly<{
-                pageX?: number;
-                pageY?: number;
-                preventDefault(): void;
-            }>,
-        ) => {
-            e.preventDefault();
-
-            const mouseCoord = graphie.getMouseCoord(e);
-            this._fireEvent(state.onMove, mouseCoord, prevMouseCoord);
-            this.draw();
-            prevMouseCoord = mouseCoord;
-        };
-
-        const upHandler = () => {
-            $(document).unbind("vmousemove", moveHandler);
-            $(document).unbind("vmouseup", upHandler);
-            if (state.isHovering) {
-                this._fireEvent(state.onClick, prevMouseCoord, startMouseCoord);
-            }
-            state.isHovering = this.state.isMouseOver;
-            state.isDragging = false;
-            graphie.isDragging = false;
-            this._fireEvent(state.onMoveEnd, prevMouseCoord, startMouseCoord);
-            this.draw();
-        };
-
-        $(document).bind("vmousemove", moveHandler);
-        $(document).bind("vmouseup", upHandler);
-    }
-
-    _applyConstraints(
-        current: Coord,
-        previous: Coord,
-        extraOptions?: ConstraintCallbacks,
-    ) {
-        let skipRemaining = false;
-
-        return (this.state.constraints ?? []).reduce(
-            (memo: Coord | false, 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,
-        );
-    }
-
-    // Change z-order to back
-    toBack() {
-        if (this.state.mouseTarget) {
-            this.state.mouseTarget.toBack();
-        }
-    }
-
-    // Change z-order to front
-    toFront() {
-        if (this.state.mouseTarget) {
-            this.state.mouseTarget.toFront();
-        }
-    }
-
-    /**
-     * 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(eventName: string, id: string, func: () => unknown) {
-        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(eventName: string, id: string) {
-        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);
-            keys.forEach((key) => {
-                if (
-                    getEventName(key) === eventName &&
-                    this._listenerMap[key] > index
-                ) {
-                    this._listenerMap[key]--;
-                }
-            });
-        }
-    }
-
-    remove() {
-        this.state.added = false;
-        this._fireEvent(this.state.remove);
-        if (this.state.mouseTarget) {
-            $(this.state.mouseTarget).off();
-            this.state.mouseTarget.remove();
-            this.state.mouseTarget = null;
-        }
-    }
-
-    cursor() {
-        return this.state.cursor;
-    }
-
-    added() {
-        return this.state.added;
-    }
-
-    isHovering() {
-        return this.state.isHovering;
-    }
-
-    isMouseOver() {
-        return this.state.isMouseOver;
-    }
-
-    isDragging() {
-        return this.state.isDragging;
-    }
-
-    mouseTarget() {
-        return this.state.mouseTarget;
-    }
-}
-
-function getKey(eventName: string, id: string): string {
-    return eventName + ":" + id;
-}
-
-function getEventName(key: string): string {
-    return key.split(":")[0];
-}

package/src/interactive2/objective_.ts

@@ -1,79 +0,0 @@
-/**
- * A work-in-progress of _ methods for objects.
- * That is, they take an object as a parameter,
- * and return an object instead of an array.
- *
- * TODO(aria): Move this out of interactive2
- */
-
-import _ from "underscore";
-
-/**
- * Does a pluck on keys inside objects in an object
- *
- * Ex:
- * tools = {
- *     translation: {
- *         enabled: true
- *     },
- *     rotation: {
- *         enabled: false
- *     }
- * };
- * pluckObject(tools, "enabled") returns {
- *     translation: true
- *     rotation: false
- * }
- */
-const pluck = function (table: any, subKey: string): any {
-    return _.object(
-        _.map(table, function (value, key) {
-            return [key, value[subKey]];
-        }),
-    );
-};
-
-/**
- * Maps an object to an object
- *
- * > mapObject({a: '1', b: '2'}, (value, key) => {
- *       return value + 1;
- *   });
- * {a: 2, b: 3}
- */
-const mapObject = function <K extends string, V, U>(
-    obj: Partial<Record<K, V>>,
-    lambda: (arg1: V, arg2: K) => U,
-): Partial<Record<K, U>> {
-    const result: Record<string, any> = {};
-    _.each(_.keys(obj), function (key) {
-        // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'K'.
-        result[key] = lambda(obj[key], key);
-    });
-    return result;
-};
-
-/**
- * Maps an array to an object
- *
- * > mapObjectFromArray(['a', 'b'], function(elem) {
- *       return elem + elem;
- *   });
- * {a: 'aa', b: 'bb'}
- */
-const mapObjectFromArray = function <K extends string, V>(
-    arr: ReadonlyArray<K>,
-    lambda: (arg1: K) => V,
-): Partial<Record<K, V>> {
-    const result: Record<string, any> = {};
-    _.each(arr, function (elem) {
-        result[elem] = lambda(elem);
-    });
-    return result;
-};
-
-export default {
-    pluck: pluck,
-    mapObject: mapObject,
-    mapObjectFromArray: mapObjectFromArray,
-};

package/src/interactive2/types.ts

@@ -1,17 +0,0 @@
-import type {Movable} from "./movable";
-
-export type Coord = [number, number]; // x, y
-export type Line = [Coord, Coord]; // start, end
-export type Constraint = (
-    this: Movable<any>,
-    current: Coord | boolean,
-    previous: Coord,
-    options: ConstraintCallbacks,
-) => Coord | boolean | undefined;
-
-// TODO(benchristel): these callbacks feel overcomplicated. Can we
-// get rid of them?
-export type ConstraintCallbacks = {
-    onSkipRemaining(): void;
-    onOutOfBounds?: () => void;
-};

package/src/interactive2/wrapped-defaults.ts

@@ -1,87 +0,0 @@
-/* eslint-disable @babel/no-invalid-this */
-/**
- * Default methods for a wrapped movable.
- */
-
-import {vector as kvector} from "@khanacademy/kmath";
-import $ from "jquery";
-import _ from "underscore";
-
-import InteractiveUtil from "./interactive-util";
-import objective_ from "./objective_";
-
-/*
- * These functions, when called on the wrapped object, simply pass the
- * arguments to the underlying Raphael object.
- */
-const PASS_TO_RAPHAEL = ["attr", "animate"];
-
-const WrappedDefaults: any = _.extend(
-    {
-        transform: function (transformation) {
-            const prefixedTransform = InteractiveUtil.getPrefixedTransform();
-            // @ts-expect-error - TS2538 - Type 'null' cannot be used as an index type. | TS2538 - Type 'undefined' cannot be used as an index type.
-            this.wrapper.style[prefixedTransform] = transformation;
-        },
-
-        toFront: function () {
-            const parentNode = this.wrapper.parentNode;
-            // TODO(emily): Sometimes, we call `.remove()` but then hold a
-            // reference to this object, and sometimes call `.toFront` on it.
-            // Notably, this happens in the reflection transformation in the
-            // Transformer widget. This is a hacky fix. Make this less bad.
-            if (parentNode) {
-                parentNode.appendChild(this.wrapper);
-            }
-        },
-
-        toBack: function () {
-            const parentNode = this.wrapper.parentNode;
-            if (parentNode.firstChild !== this.wrapper) {
-                parentNode.insertBefore(this.wrapper, parentNode.firstChild);
-            }
-        },
-
-        remove: function () {
-            this.visibleShape.remove();
-            $(this.wrapper).remove();
-        },
-
-        getMouseTarget: function () {
-            return this.visibleShape[0];
-        },
-
-        moveTo: function (point) {
-            const delta = kvector.subtract(
-                this.graphie.scalePoint(point),
-                this.graphie.scalePoint(this.initialPoint),
-            );
-            const do3dTransform = InteractiveUtil.getCanUse3dTransform();
-            const transformation =
-                "translateX(" +
-                delta[0] +
-                "px) " +
-                "translateY(" +
-                delta[1] +
-                "px)" +
-                (do3dTransform ? " translateZ(0)" : "");
-            this.transform(transformation);
-        },
-
-        hide: function () {
-            this.visibleShape.hide();
-        },
-
-        show: function () {
-            this.visibleShape.show();
-        },
-    },
-    objective_.mapObjectFromArray(PASS_TO_RAPHAEL, function (attribute) {
-        return function (...args) {
-            // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-            this.visibleShape[attribute](...args);
-        };
-    }),
-);
-
-export default WrappedDefaults;