Как работает курсор в Ace

Question

Я очень заинтригован тем, как работает Ace .

Мне любопытно, как курсор может перемещаться между каждым символом в элементах div / span либо щелчком или нажатием клавиш со стрелками.

Меня также заинтриговало то, как выделяется текстработает, когда вы выбираете его (вид становится сероватым в демоверсии )

Буду признателен, если кто-нибудь сможет пролить свет на эти вопросы.

Заранее спасибо.

Answer 1

В Ace я в основном рассматриваю DOM как API для рисования. Все, что вы видите, «нарисовано» с использованием абсолютно позиционированных элементов DIV и SPAN. Текст выводится с использованием SPAN, строки (например, курсор или выделенные области) - это DIV и т. Д.

Чтобы все правильно расположить, я сначала измеряю высоту и ширину символа. Это также причина, по которой Ace работает только с монофоническими шрифтами.

Когда вы щелкаете внутри Ace, я вычисляю относительное положение мыши внутри редактора, используя getBoundingClientRect , а затем преобразовываю это в позиции символов, используя измеренный размер символов. Навигация с помощью клавиатуры аналогична.

Answer 2

Когда я проверяю демонстрационную страницу и перемещаю курсор, нажимая клавиши со стрелками, атрибут style.left курсора div перемещается на 7 пикселей в соответствующем направлении. Для увеличения и уменьшения это 15px, точный размер интервалов, используемых для отображения текста.

Для выбора они используют div с именем класса ace_selection, который затем размещается с абсолютной позицией.

Я предлагаю осмотреть демо с помощью chrome или firefox, чтобы ближе познакомиться с ним. Вы можете увидеть, как они создают новые div и изменяют атрибуты div при каждом вашем действии.