LINUX.ORG.RU
Форум — Web-development  

псевдокурсор

 


0

1

вот на этой странице https://codepen.io/simoberny/pen/pJZJQY можно увидеть редактор в котором мигает курсор, на самом деле это div которому меняют видимость.

вопрос: если вводить символы курсор перемещается, как они узнают какие left и top координаты задавать? можно мышкой кликнуть в любую часть кода, как они узнают какие задать координаты?

★★

(Наверно) Top берут из offsetTop span на котором опускаем мышь. Left рассчитывают как нравится.
Напрмер cursor.style.left = offsetLeft+(длина span/количество символов*(позициятекущегосимвола-1))
Ну и т.д
Вот пример функции которая считает offsetTop/offsetLeft http://javascript.ru/ui/offset

Int0l ★★
()
Последнее исправление: Int0l (всего исправлений: 3)
Ответ на: комментарий от Int0l

те вы думаете они каждую букву оборачивают в span на который вешают onclick в котором узнают координаты этого span?

quester ★★
() автор топика
Ответ на: комментарий от quester

Не каждую букву - только элементы ast целиком и только для подсветки синтаксиса. Поскольку в редакторе моношир, то и вычислить ширину на которую сдвигать курсор не сложно.

Deleted
()
Последнее исправление: Deleted (всего исправлений: 1)
Ответ на: комментарий от quester

строки?

Нет, ноды в AST. 

div -> id -> 'presentation'
    -> content
          -> h1 -> ~text~
          -> h3 -> ~text~

onclick на родительский контейнер в котором строки лежат и у MouseEvent бери нужные координаты, дальше дели и округляй. Размеры каждого глифа известны, межстрочный интервал тоже.

Deleted
()
Ответ на: комментарий от Deleted

да наверное вы правы, спасибо будем пробывать

quester ★★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development