@khanacademy/math-input 17.0.3 → 17.0.5

package/src/components/input/__tests__/test-math-wrapper.ts

@@ -1,29 +0,0 @@
-import MathWrapper from "../math-wrapper";
-
-export default class TestMathWrapper extends MathWrapper {
-    getContent() {
-        return this.mathField.latex();
-    }
-
-    selectAll() {
-        this.mathField.select();
-    }
-
-    clearSelection() {
-        this.mathField.clearSelection();
-    }
-
-    moveToStart() {
-        this.mathField.moveToLeftEnd();
-    }
-
-    isSelected() {
-        const selection = this.getSelection();
-
-        if (selection) {
-            return selection.ends[-1][-1] === 0 && selection.ends[1][1] === 0;
-        }
-
-        return false;
-    }
-}

package/src/components/input/cursor-contexts.ts

@@ -1,37 +0,0 @@
-/**
- * Enum that defines the various contexts in which a cursor can exist. The
- * active context is determined first by looking at the cursor's siblings (e.g.,
- * for the `BEFORE_FRACTION` context), and then at its direct parent. Though a
- * cursor could in theory be nested in multiple contexts, we only care about the
- * immediate context.
- *
- * TODO(charlie): Add a context to represent being inside of a radical. Right
- * now, we show the dismiss button rather than allowing the user to jump out of
- * the radical.
- */
-
-export enum CursorContext {
-    // The cursor is not in any of the other viable contexts.
-    NONE = "NONE",
-
-    // The cursor is within a set of parentheses.
-    IN_PARENS = "IN_PARENS",
-
-    // The cursor is within a superscript (e.g., an exponent).
-    IN_SUPER_SCRIPT = "IN_SUPER_SCRIPT",
-
-    // The cursor is within a subscript (e.g., the base of a custom logarithm).
-    IN_SUB_SCRIPT = "IN_SUB_SCRIPT",
-
-    // The cursor is in the numerator of a fraction.
-    IN_NUMERATOR = "IN_NUMERATOR",
-
-    // The cursor is in the denominator of a fraction.
-    IN_DENOMINATOR = "IN_DENOMINATOR",
-
-    // The cursor is sitting before a fraction; that is, the cursor is within
-    // what looks to be a mixed number preceding a fraction. This will only be
-    // the case when the only math between the cursor and the fraction to its
-    // write is non-leaf math (numbers and variables).
-    BEFORE_FRACTION = "BEFORE_FRACTION",
-}

package/src/components/input/cursor-handle.tsx

@@ -1,137 +0,0 @@
-/**
- * Renders the green tear-shaped handle under the cursor.
- */
-
-import * as React from "react";
-
-import {
-    cursorHandleRadiusPx,
-    cursorHandleDistanceMultiplier,
-} from "./cursor-styles";
-
-const touchTargetRadiusPx = 2 * cursorHandleRadiusPx;
-const touchTargetHeightPx = 2 * touchTargetRadiusPx;
-const touchTargetWidthPx = 2 * touchTargetRadiusPx;
-
-const cursorRadiusPx = cursorHandleRadiusPx;
-const cursorHeightPx = cursorHandleDistanceMultiplier * (cursorRadiusPx * 4);
-const cursorWidthPx = 4 * cursorRadiusPx;
-
-type Props = {
-    animateIntoPosition: boolean;
-    onTouchCancel: (arg1: React.TouchEvent<HTMLSpanElement>) => void;
-    onTouchEnd: (arg1: React.TouchEvent<HTMLSpanElement>) => void;
-    onTouchMove: (arg1: React.TouchEvent<HTMLSpanElement>) => void;
-    onTouchStart: (arg1: React.TouchEvent<HTMLSpanElement>) => void;
-    visible: boolean;
-    x: number;
-    y: number;
-};
-
-type DefaultProps = {
-    animateIntoPosition: Props["animateIntoPosition"];
-    visible: Props["visible"];
-    x: Props["x"];
-    y: Props["y"];
-};
-
-class CursorHandle extends React.Component<Props> {
-    static defaultProps: DefaultProps = {
-        animateIntoPosition: false,
-        visible: false,
-        x: 0,
-        y: 0,
-    };
-
-    render(): React.ReactNode {
-        const {x, y, animateIntoPosition} = this.props;
-
-        const animationStyle = animateIntoPosition
-            ? {
-                  transitionDuration: "100ms",
-                  transitionProperty: "transform",
-              }
-            : {};
-        const transformString = `translate(${x}px, ${y}px)`;
-
-        const outerStyle = {
-            position: "absolute",
-            // This is essentially webapp's interactiveComponent + 1.
-            // TODO(charlie): Pull in those styles somehow to avoid breakages.
-            zIndex: 4,
-            left: -touchTargetWidthPx / 2,
-            top: 0,
-            transform: transformString,
-            width: touchTargetWidthPx,
-            height: touchTargetHeightPx,
-            // Touch events that start on the cursor shouldn't be allowed to
-            // produce page scrolls.
-            touchAction: "none",
-            ...animationStyle,
-        } as const;
-
-        return (
-            <span
-                style={outerStyle}
-                onTouchStart={this.props.onTouchStart}
-                onTouchMove={this.props.onTouchMove}
-                onTouchEnd={this.props.onTouchEnd}
-                onTouchCancel={this.props.onTouchCancel}
-            >
-                <svg
-                    fill="none"
-                    width={cursorWidthPx}
-                    height={cursorHeightPx}
-                    viewBox={`0 0 ${cursorWidthPx} ${cursorHeightPx}`}
-                >
-                    <filter
-                        id="math-input_cursor"
-                        colorInterpolationFilters="sRGB"
-                        filterUnits="userSpaceOnUse"
-                        height={cursorHeightPx * 0.87} // ~40
-                        width={cursorWidthPx * 0.82} // ~36
-                        x="4"
-                        y="0"
-                    >
-                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
-                        <feColorMatrix
-                            in="SourceAlpha"
-                            type="matrix"
-                            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                        />
-                        <feOffset dy="4" />
-                        <feGaussianBlur stdDeviation="4" />
-                        <feColorMatrix
-                            type="matrix"
-                            values="0 0 0 0 0.129412 0 0 0 0 0.141176 0 0 0 0 0.172549 0 0 0 0.08 0"
-                        />
-                        <feBlend
-                            in2="BackgroundImageFix"
-                            mode="normal"
-                            result="effect1_dropShadow"
-                        />
-                        <feBlend
-                            in="SourceGraphic"
-                            in2="effect1_dropShadow"
-                            mode="normal"
-                            result="shape"
-                        />
-                    </filter>
-                    <g filter="url(#math-input_cursor)">
-                        <path
-                            d="m22 4-7.07 7.0284c-1.3988 1.3901-2.3515 3.1615-2.7376 5.09-.3861 1.9284-.1883 3.9274.5685 5.7441s2.0385 3.3694 3.6831 4.4619c1.6445 1.0925 3.5781 1.6756 5.556 1.6756s3.9115-.5831 5.556-1.6756c1.6446-1.0925 2.9263-2.6452 3.6831-4.4619s.9546-3.8157.5685-5.7441c-.3861-1.9285-1.3388-3.6999-2.7376-5.09z"
-                            fill="#1865f2"
-                        />
-                    </g>
-                    <path
-                        d="m14.9301 10.4841 7.0699-7.06989 7.0699 7.06989.0001.0001c1.3988 1.3984 2.3515 3.1802 2.7376 5.1201s.1883 3.9507-.5685 5.7782c-.7568 1.8274-2.0385 3.3894-3.6831 4.4883-1.6445 1.099-3.5781 1.6855-5.556 1.6855s-3.9115-.5865-5.556-1.6855c-1.6446-1.0989-2.9263-2.6609-3.6831-4.4883-.7568-1.8275-.9546-3.8383-.5685-5.7782s1.3388-3.7217 2.7376-5.1201z"
-                        stroke="#fff"
-                        strokeWidth="2"
-                    />
-                </svg>
-            </span>
-        );
-    }
-}
-
-export default CursorHandle;

package/src/components/input/cursor-styles.ts

@@ -1,10 +0,0 @@
-/**
- * Common parameters used to style components.
- */
-export const cursorHandleRadiusPx = 11;
-
-// The amount to multiply the radius by to get the distance from the
-// center to the tip of the cursor handle.  The cursor is a circle with
-// one quadrant replace with a square.  The hypotenuse of the square is
-// 1.045 times the radius of the circle.
-export const cursorHandleDistanceMultiplier = 1.045;

package/src/components/input/drag-listener.ts

@@ -1,79 +0,0 @@
-/**
- * A gesture recognizer that detects 'drags', crudely defined as either scrolls
- * or touches that move a sufficient distance.
- */
-
-// The 'slop' factor, after which we consider the use to be dragging. The value
-// is taken from the Android SDK. It won't be robust to page zoom and the like,
-// but it should be good enough for our purposes.
-const touchSlopPx = 8;
-
-class DragListener {
-    _scrollListener: () => void;
-    _moveListener: (evt: TouchEvent) => void;
-    _endAndCancelListener: (evt: TouchEvent) => void;
-
-    constructor(onDrag, initialEvent) {
-        // We detect drags in two ways. First, by listening for the window
-        // scroll event (we consider any legitimate scroll to be a drag).
-        this._scrollListener = () => {
-            onDrag();
-        };
-
-        // And second, by listening for touch moves and tracking the each
-        // finger's displacement. This allows us to track, e.g., when the user
-        // scrolls within an individual view.
-        const touchLocationsById = {};
-        for (let i = 0; i < initialEvent.changedTouches.length; i++) {
-            const touch = initialEvent.changedTouches[i];
-            touchLocationsById[touch.identifier] = [
-                touch.clientX,
-                touch.clientY,
-            ];
-        }
-
-        this._moveListener = (evt) => {
-            for (let i = 0; i < evt.changedTouches.length; i++) {
-                const touch = evt.changedTouches[i];
-                const initialTouchLocation =
-                    touchLocationsById[touch.identifier];
-                if (initialTouchLocation) {
-                    const touchLocation = [touch.clientX, touch.clientY];
-                    const dx = touchLocation[0] - initialTouchLocation[0];
-                    const dy = touchLocation[1] - initialTouchLocation[1];
-
-                    const squaredDist = dx * dx + dy * dy;
-                    const squaredTouchSlop = touchSlopPx * touchSlopPx;
-
-                    if (squaredDist > squaredTouchSlop) {
-                        onDrag();
-                    }
-                }
-            }
-        };
-
-        // Clean-up any terminated gestures, since some browsers reuse
-        // identifiers.
-        this._endAndCancelListener = (evt) => {
-            for (let i = 0; i < evt.changedTouches.length; i++) {
-                delete touchLocationsById[evt.changedTouches[i].identifier];
-            }
-        };
-    }
-
-    attach() {
-        window.addEventListener("scroll", this._scrollListener);
-        window.addEventListener("touchmove", this._moveListener);
-        window.addEventListener("touchend", this._endAndCancelListener);
-        window.addEventListener("touchcancel", this._endAndCancelListener);
-    }
-
-    detach() {
-        window.removeEventListener("scroll", this._scrollListener);
-        window.removeEventListener("touchmove", this._moveListener);
-        window.removeEventListener("touchend", this._endAndCancelListener);
-        window.removeEventListener("touchcancel", this._endAndCancelListener);
-    }
-}
-
-export default DragListener;