? Estoy bastante intrigado por cómo funciona Ace.¿Cómo funciona el cursor en Ace
Tengo curiosidad por cómo el cursor puede moverse entre cada carácter en los divs/tramos ya sea haciendo clic o presionando las teclas de flecha.
También estoy intrigado por la forma lo más destacado en el texto funciona cuando se selecciona (tipo de giros grisáceo en el demo)
agradecería que si alguien puede arrojar algo de luz sobre estas cuestiones.
Gracias de antemano.
Cuando inspecciono la página de demostración y muevo el cursor presionando las teclas de dirección, el atributo style.left del cursor div se mueve 7px en la dirección adecuada. Para arriba y abajo, es de 15 píxeles, el tamaño exacto de los tramos utilizados para mostrar el texto.
Para la selección, están utilizando un div con el nombre de clase ace_selection que luego se coloca en una posición absoluta.
Sugiero inspeccionar la demostración con Chrome o Firefox para verla de cerca. Puedes ver cómo crean nuevos divs y modificar los atributos del div con cada acción que realizas.
En Ace básicamente trato el DOM como una API de dibujo. Todo lo que ves está "dibujado" usando elementos DIV y SPAN absolutamente posicionados. El texto se dibuja utilizando SPAN, las líneas (por ejemplo, el cursor o las selecciones) son DIV, etc.
Para colocar todo correctamente, primero mido el alto y el ancho de un carácter. Esa es también la razón por la que Ace solo funciona con fuentes espaciadas mono.
Al hacer clic dentro de Ace, calculo la posición relativa del mouse dentro del editor usando getBoundingClientRect y luego lo traduzco a las posiciones de los caracteres usando el tamaño del carácter medido. Navegar con el teclado es similar.
He personalizado ACE para que trabaje con caracteres UTF-8 del idioma indio Tamil, y esto tiene símbolos de glifos múltiples para letras, y agrava este problema de desplazamiento del punto del cursor. – Arcturus