@khanacademy/math-input 0.4.1 → 0.5.2

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

@@ -0,0 +1,29 @@
+/**
+ * Constants that define 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.
+ */
+
+// The cursor is not in any of the other viable contexts.
+export const NONE = "NONE";
+// The cursor is within a set of parentheses.
+export const IN_PARENS = "IN_PARENS";
+// The cursor is within a superscript (e.g., an exponent).
+export const IN_SUPER_SCRIPT = "IN_SUPER_SCRIPT";
+// The cursor is within a subscript (e.g., the base of a custom logarithm).
+export const IN_SUB_SCRIPT = "IN_SUB_SCRIPT";
+// The cursor is in the numerator of a fraction.
+export const IN_NUMERATOR = "IN_NUMERATOR";
+// The cursor is in the denominator of a fraction.
+export const 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).
+export const BEFORE_FRACTION = "BEFORE_FRACTION";

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

@@ -0,0 +1,137 @@
+/**
+ * Renders the green tear-shaped handle under the cursor.
+ */
+
+import PropTypes from "prop-types";
+import * as React from "react";
+
+import {
+    cursorHandleRadiusPx,
+    cursorHandleDistanceMultiplier,
+} from "../common-style.js";
+
+const touchTargetRadiusPx = 2 * cursorHandleRadiusPx;
+const touchTargetHeightPx = 2 * touchTargetRadiusPx;
+const touchTargetWidthPx = 2 * touchTargetRadiusPx;
+
+const cursorRadiusPx = cursorHandleRadiusPx;
+const cursorHeightPx = cursorHandleDistanceMultiplier * (cursorRadiusPx * 4);
+const cursorWidthPx = 4 * cursorRadiusPx;
+
+class CursorHandle extends React.Component {
+    static propTypes = {
+        animateIntoPosition: PropTypes.bool,
+        onTouchCancel: PropTypes.func.isRequired,
+        onTouchEnd: PropTypes.func.isRequired,
+        onTouchMove: PropTypes.func.isRequired,
+        onTouchStart: PropTypes.func.isRequired,
+        visible: PropTypes.bool.isRequired,
+        x: PropTypes.number.isRequired,
+        y: PropTypes.number.isRequired,
+    };
+
+    static defaultProps = {
+        animateIntoPosition: false,
+        visible: false,
+        x: 0,
+        y: 0,
+    };
+
+    render() {
+        const {x, y, animateIntoPosition} = this.props;
+
+        const animationStyle = animateIntoPosition
+            ? {
+                  msTransitionDuration: "100ms",
+                  WebkitTransitionDuration: "100ms",
+                  transitionDuration: "100ms",
+                  msTransitionProperty: "transform",
+                  WebkitTransitionProperty: "transform",
+                  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,
+            msTransform: transformString,
+            WebkitTransform: transformString,
+            transform: transformString,
+            width: touchTargetWidthPx,
+            height: touchTargetHeightPx,
+            // Touch events that start on the cursor shouldn't be allowed to
+            // produce page scrolls.
+            touchAction: "none",
+            ...animationStyle,
+        };
+
+        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/drag-listener.js

@@ -0,0 +1,75 @@
+/**
+ * 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 {
+    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;