Сделайте прокрутку поля mathquill всегда с помощью курсора - PullRequest
Новая
       21

Сделайте прокрутку поля mathquill всегда с помощью курсора

0 голосов
/ 25 ноября 2018

Когда курсор находится вне области просмотра, в Mathquill курсор остается скрытым, если пользователь не прокручивает.Обычно, как и в обычных представлениях калькулятора, математическое поле должно автоматически прокручиваться курсором, чтобы курсор всегда отображался пользователю.

Поведение других математических редакторов: https://i.imgur.com/1JbRv2F.gifv

Поведение Mathquill:https://i.imgur.com/9E15uS2.gifv

Я пытался проверить, находится ли курсор вне области просмотра, затем я прокручиваю автоматически, но проблема в том, что курсор теряет фокус и становится нулевым элементом, и я не могу прокрутить до него.

1 Ответ

0 голосов
/ 26 ноября 2018

Я решил эту проблему, используя следующий код:

Сначала я добавил функцию для определения, находится ли курсор вне области просмотра (источник: https://stackoverflow.com/a/15203639/3880171)

function isElementVisible(el) {
    var rect = el.getBoundingClientRect(),
        vWidth = window.innerWidth || document.documentElement.clientWidth,
        vHeight = window.innerHeight || document.documentElement.clientHeight,
        efp = function (x, y) {
            return document.elementFromPoint(x, y)
        };

    // Return false if it's not in the viewport
    if (rect.right < 0 || rect.bottom < 0
        || rect.left > vWidth || rect.top > vHeight)
        return false;

    // Return true if any of its four corners are visible
    return (
        el.contains(efp(rect.left, rect.top))
        || el.contains(efp(rect.right, rect.top))
        || el.contains(efp(rect.right, rect.bottom))
        || el.contains(efp(rect.left, rect.bottom))
    );
}

Я добавил onKeyUpСобытие в mathview:

<span id="expression" onkeyup="onEditorKeyPress()"></span>

наконец, функция, которая использует магию прокрутки: 

function scrollToCursor() {
    mathField.focus();
    var cursor = document.querySelector(".mq-cursor");
    if (cursor != null && !isElementVisible(cursor)) {
        document.querySelector(".mq-cursor").scrollIntoView();
    }
}

function onEditorKeyPress() {
    scrollToCursor();
}
...