Flechas (En Detalle)

Hola, y bienvenidos a mi charla, Flechas en detalle. Mi nombre es Steve Ruiz y me encuentro en Twitter como SteveRuizOK. Pueden seguirme usando este código QR y si les gustan las flechas, probablemente deberían seguir o si les gusta otro tipo de contenido visual de algoritmos. Soy el fundador de un, bueno solía ser un proyecto secundario, ahora es una startup llamada Teal Draw. Y Teal Draw es una pequeña aplicación de dibujo, pueden acceder a ella en TealDraw.com y les mostraré cómo se ve. Es, como dije, una especie de aplicación de dibujo, una aplicación de diagramación.

Pueden usarla para pizarra colaborativa. Es gratuita, basada en archivos y con un enfoque local. Y estamos trabajando en la nueva versión de esa aplicación que está diseñada más como una plataforma de productos para desarrolladores con la que pueden construir este tipo de aplicaciones. Así que si tienen una idea para un lienzo espacial, una especie de figma para una aplicación x, entonces podrían construirlo sobre Teal Draw en lugar de comenzar desde cero. Y es bastante bueno, obtienen mucho de forma gratuita. Quién sabe, tal vez vuelva el próximo año y pueda hablar de eso. Pero hoy, sí, vamos a hablar de Teal Draw y específicamente vamos a hablar de las flechas. Hay mucho de lo que podríamos hablar, como el minimapa o la tinta digital, ambas cosas son súper complejas e interesantes, creo que hay historias de desarrolladores que contar. Pero en lugar de eso, vamos a hablar solo de las flechas y he pasado mucho tiempo trabajando en las flechas y si han usado Teal Draw, podrán notar que las flechas son especiales, son consideradas. Hay muchas formas diferentes de hacer una flecha. Les mostraré las formas en que lo hacemos y también un poco de contexto sobre por qué y por qué no lo hacemos de otra manera. Así que vamos a sumergirnos en ello. Digamos hola a las flechas, lo que sea.

¿Qué es una flecha? Es una línea. Específicamente, es como una línea de conexión. Está conectando dos cosas diferentes. Podría estar conectando dos puntos en el espacio como vemos aquí. Podría estar conectando dos cosas, como dos formas, como estos dos rectángulos.

Podría estar conectando una forma y un lugar o un lugar y una forma. O un lugar y un lugar dentro de una forma. La idea es indicar un área específica de una cosa específica, en lugar de solo la cosa en sí misma.

La mayoría de las flechas están dirigidas en el sentido de que van en una dirección específica. Indicamos esa dirección con una punta de flecha que puede ir en cualquier dirección. Así, de esta manera, de esa manera, en ambas direcciones. Las puntas de flecha también se pueden utilizar en diferentes tipos de marcos de diagramación para representar diferentes cosas. Por ejemplo, si tienes un gráfico de entidades o servidores, se pueden utilizar diferentes puntas de flecha para representar diferentes relaciones entre esas dos cosas. También se pueden etiquetar las flechas. Las etiquetas podrían verse así o así. Es un poco difícil hacerlo bien así, así que lo hago así.

Las flechas en sí mismas también pueden tener diferentes formas. No siempre quieres una línea recta. Tal vez quieras algunos codos. Tal vez quieras algunas curvas a lo largo de esos codos. Tal vez quieras un arco o un spline. Y el lugar donde esto se vuelve realmente complicado e interesante es cuando consideras cómo los usuarios crean estas flechas. ¿Cómo ajustas una línea de codo o un spline como este? Ahí es donde realmente se vuelve un poco complicado, como veremos.

La mayoría de las flechas y la mayoría de las herramientas de diagramación se conectan a cosas específicas llamadas conectores. Son lugares específicos en cada lado de la forma donde las flechas pueden conectarse. Así que llamémoslos noreste-suroeste. En este caso, tendríamos este conectando con oeste. Es bastante sencillo. Quieres conectar ciertos conectores entre sí.

No quieres situaciones como esta en las que estás basado en el oeste-oeste según la disposición de las dos formas. Eso no se ve bien. En su lugar, probablemente quieras tener un segmento de línea que vaya entre los dos puntos de anclaje en los dos centros. Observa qué bordes se rompen o se intersectan y luego utiliza los conectores en esos lados. Eso funcionará tanto si las formas son de diferentes tamaños como si están posicionadas de diferentes maneras.

Esa es una regla bastante buena para qué lados usar. Pero incluso así, es posible que quieras complicar las cosas. Es posible que desees mezclar un poco las cosas y tener codos o flechas en ángulo recto, o tal vez quieras convertir eso en algún tipo de curva cuadrática. Siéntete libre de hacerlo, pero aún así necesitarías elegir qué conectores conectar. Eso no siempre es así. Esto es tal vez como una flecha en forma de L, pero también te encontrarás, si sigues este camino, con flechas en forma de C y flechas en forma de I, lugares donde quieres, tal vez si las formas están directamente alineadas, entonces quieres conectar los dos puntos más cercanos. Si están alineados, pero están muy cerca uno del otro, entonces tal vez quieras conectar los puntos hacia un lado. Así que terminas con esta forma en C y sí, si están más o menos así, entonces terminas con una forma en L.

Hay muchas combinaciones posibles y muchas reglas sobre cuándo elegir qué conector, y mucho menos dónde elegir, qué codo elegir y todo eso. Se vuelve bastante complicado y tampoco funciona muy bien en todos los casos. Te encuentras con estos casos particulares, que están literalmente en el límite de un espacio de decisiones, donde no se ha movido lo suficiente como para activar otra ruta de decisión, como, okay, conectemos a un conjunto diferente de flechas o conectores, pero aún está mal, como donde tienes, por ejemplo aquí, el extremo corto de la flecha en codo, que es más corto que la propia punta de flecha, y eso ocurre en muchas aplicaciones donde se utiliza este tipo de cosa.

Especialmente si los usuarios crean sus propias flechas, te encuentras con situaciones como esta donde quieres preservar las decisiones del usuario sin importar lo que hayan hecho. A veces eso significa que quiero que esto se conecte a esta otra forma, pero si los usuarios también editan la flecha, es posible que hayan movido este lado de la flecha hacia la derecha y luego cuando mueves la punta de flecha a otra forma o mueves esa forma a la que está conectada y preservas esa punta de flecha hacia la derecha o el segmento de la flecha que el usuario ha movido, terminas con flechas que se ven un poco extrañas.

Has utilizado una aplicación llamada Whimsical. Whimsical es una aplicación fantástica y un conjunto maravilloso de, bueno, diferentes utilidades realmente. Un par de aplicaciones en una. Pero con sus flechas, puedes llegar a estados bastante extraños al hacer esto, al editar la flecha y también conectarla a algo. Así que es un poco impredecible. Finalmente, las flechas de conexión o el uso de conectores, no hay realmente una solución para, quiero conectar esto dentro de esta otra forma. Normalmente, sí, si no hay un conector allí, entonces simplemente no puedes conectarlo. Así que esta es una historia un poco complicada. Y también si la forma es irregular, los conectores pueden ser un problema. Principalmente porque los conectores son Noreste, Suroeste, se basan en la caja delimitadora de la forma. Si la forma es un cuadro, eso es perfecto porque corresponde. Si no es un cuadro, y si no es un círculo y si no es igual en todos los cuatro lados, entonces podrías encontrarte en situaciones donde sí, simplemente están ahí colgando en el espacio.

Cuanto más orgánica es la forma, menos parece que el conector realmente se conecta a la forma. Entonces, ¿cuál es una alternativa? Así es. La alternativa son las intersecciones, o al menos esta es una alternativa. Esta es una de las que terminamos utilizando en Teal Draw.

Así es como funciona. Si piensas en una flecha nuevamente, como una especie de línea entre dos puntos de anclaje, tal vez sea el punto medio, pensemos más en eso, es como un segmento de línea que podemos intersectar en un lugar específico con las dos formas. Así que en lugar de prestar atención a qué borde está roto, en realidad miramos, okay, ¿dónde se intersecta esto con la forma? Y luego simplemente dibujamos la línea, la flecha entre esos dos puntos. Fácil.

Así se ve bien. Se ve un poco menos bien para la punta de flecha, el final de la flecha en lugar del comienzo de la flecha. Entonces, lo que hice en Teal Draw es que si hay una intersección y ese lado de la flecha tiene una punta de flecha, retrocedo un poco la punta de flecha. Puedes pensar en esto como una intersección contra los límites expandidos de la forma, pero en realidad no lo es. Te diré por qué en un segundo, pero esto es, esto es lo que quieres. Esto es bueno. Dije como, en realidad no estamos expandiendo los límites y luego intersectando con eso. Simplemente retrocedemos la flecha en la dirección en la que vino. Y la razón de esto es que con formas más complicadas, sí, podrías hacer cosas con los desplazamientos de los límites. Sí, podrías hacer esto. Es un poco complicado. Um, y cuanto más orgánica es una forma, más complicado se vuelve. No quieres hacer, ya sabes, desplazamientos de curvas de Bézier solo para que la punta de flecha retroceda 12 píxeles. Simplemente inviertes la flecha. La empujas hacia atrás. Es fácil. Um, así que no hagas esto, solo, solo, solo haz esto de todos modos. Um, lo que obtienes es una flecha que apunta y se intersecta en el lugar correcto, y se acerca bastante al tipo de flecha que dibujarías si estuvieras dibujando esto tú mismo. Y con este tipo de algoritmos gráficos y demás, eso es realmente, realmente lo que buscas es tratar de descubrir, uh, la, la lógica detrás de una decisión estética que habrías tomado como, como diseñador, o simplemente, ya sabes, um, si tuvieras tiempo para design cada cuadro de eso o dibujar cada cuadro de eso tú mismo, a veces esas reglas son un poco complicadas, pero, uh, ese es el objetivo, obtener algo que sería como, sí, pondría la flecha ahí. Si lo hiciera yo mismo, pondría la flecha ahí. Así que, uh, hablamos de diferentes tipos de líneas, como tipos de líneas estéticas, y queremos adentrarnos en las líneas curvas.

Pero antes de adentrarnos en las líneas curvas, también debemos señalar que este algoritmo del que acabamos de hablar, donde encontramos las intersecciones, dibujamos la flecha entre ellas, y retrocedemos un poco la punta de flecha. Um, eso funciona para el lugar en una cosa. Uh, también funciona si la forma se mueve y cambia de tamaño. Um, seguirá apuntando al lugar correcto, al anclaje correcto. Um, y como veremos, incluso con líneas curvas, la flecha seguirá funcionando y seguirá funcionando, ya sabes, en la misma situación si las cosas cambian de tamaño o se mueven.

Entonces hablemos de las flechas curvas. Las flechas curvas son un poco complicadas y te mostraré por qué. En Teal Draw v1, en la versión actual de tealdraw.com, um, la forma en que hacemos las flechas curvas es teniendo manijas al inicio y al final, y podemos, um, usar una manija intermedia que viaja a lo largo, uh, la misma distancia, la misma longitud de la flecha, pero de forma perpendicular. Uh, y puede viajar a lo largo de eso. Puedes pensar en ello como normalizado, donde -1 está completamente a la izquierda y 1 está completamente a la derecha. Puedes agarrar la manija intermedia y jalarla hacia arriba hasta la parte superior. Eso sería -1 de curvatura. Um, esto sería 1 de curvatura. Esto sería como 0.5 de curvatura. Um, y de cualquier manera, así es como se crea la curva. Y el problema es que la curva no se ve bien cuando está conectada a dos formas diferentes. Ok. Yo no dibujaría eso. Y lo que sucede es, mientras que este algoritmo que teníamos antes, ¿verdad? La pequeña serie de pasos que nos daba nuestra flecha recta que funciona para flechas rectas, pero no funciona realmente para flechas curvas. Y te mostraré cómo se ve exactamente. Um, y también te mostraré por qué, pero esto es, esto es como se ve, tealdraw.com. Así es como se ven las flechas en tealdraw.com. Um, se ve bien. Se ve bastante bien. Pero cuando las flechas están un poco más separadas, simplemente no se ve bien. Así que hablemos de mejores flechas curvas. ¿Qué sería mejor si, uh, si nuestras flechas rectas se ven bien y nuestras flechas rectas se usan, ya sabes, para encontrar la flecha recta, usamos una línea recta.

Intersectamos eso con las dos formas. Um, pero no funciona bien con nuestras flechas curvas porque todavía estamos usando esa línea recta para encontrar los puntos donde se intersecta. No queremos hacer eso. En cambio, queremos usar una línea curva, uh, para encontrar dónde se intersecta con las dos formas y luego basar nuestra flecha en el espacio entre esas dos intersecciones.

En otras palabras, el modelo que teníamos antes, donde teníamos las dos manijas de la flecha, uh, la manija de inicio y la de fin, y luego la intermedia, estábamos reemplazando la manija de inicio y fin en el punto de intersección. Um, pero en cambio vamos a colocar esas manijas en, ya sabes, el punto de anclaje real, donde el usuario ha señalado la flecha. Um, en lugar de colocarlas en la punta de flecha real, las colocaremos en el, um, punto de anclaje y aún dibujaremos la flecha entre las dos intersecciones. Pero las manijas ya no están en la punta de flecha en sí si está unida a una forma. Uh, y lo que eso nos permite hacer es crear el arco entre esos tres puntos y luego nuestra flecha se ve correctamente. Podemos, podemos dibujar la flecha como parte del cuerpo de ese arco. Uh, y eso aún funciona si estamos reposicionando la manija final. Entonces, nuevamente, aquí, no estamos agarrando la punta de flecha, la manija está más o menos aquí. Todavía podemos arrastrarla y, uh, se verá, se verá correctamente. El resto del arco sucederá automáticamente. Um, también podemos agarrar la manija intermedia en esta situación. Y en lugar de que simplemente se mueva hacia arriba y hacia abajo a lo largo de un camino, realmente solo queremos ver la distancia entre la manija y el punto medio de la línea o cuerda entre el punto de inicio y el punto final. Y eso en lugar de representarse como un valor normalizado, como de menos uno a uno. Um, es una distancia real y vamos a preservar esa distancia real. Entonces, en base a esos tres puntos, podemos obtener nuestro arco y luego tenemos nuestra flecha. Veamos cómo se ve eso. Al igual que antes, tengo una flecha recta, pero esta vez las manijas están más o menos en el medio de las formas y puedo decidir dónde apunta la flecha y puedo ajustarla.

Entonces, es posible que recuerdes de la escuela secundaria, uh, yo lo perdí en la escuela secundaria, pero lo aprendí tarde. Uh, si tienes tres puntos, puedes hacer un círculo. En nuestro caso, tenemos tres puntos para el inicio y fin de la flecha y la manija intermedia de la flecha. Y eso nos permite hacer un círculo. Cualquier tres puntos, siempre y cuando no estén en una línea recta perfecta, se pueden usar para crear un círculo. Si están en línea recta, entonces eso no funciona, pero entiendes la idea. Uh, intersectamos el círculo con la primera forma para obtener estos dos puntos de intersección. Y luego seleccionamos el punto de intersección que está más cerca de la manija intermedia. Y eso se convierte en el inicio de la flecha. Repetimos para la segunda, uh, forma obtenemos esos dos puntos de intersección, encontramos el que está más cerca de la manija intermedia del centro. Y eso es el final de la flecha. Um, al igual que antes, queremos empujar ese, ese punto final hacia atrás un poco si tiene una punta de flecha, en cuyo caso obtenemos la longitud del segmento del arco y cuánto queremos empujarlo hacia atrás, etcétera, etcétera. Sí, simplemente lo hacemos. Uh, y ya tenemos toda la información que realmente necesitamos para, uh, dibujar nuestra flecha. Tenemos un círculo, tenemos el centro del círculo, tenemos un punto de inicio y un punto final, um, o al menos el inicio y el ángulo final, que podemos usar con el radio para encontrar el punto en el círculo. Y eso nos da el cuerpo de nuestra flecha. Y todo lo que tenemos que hacer es ponerle una punta de flecha y listo. Perfecto. Um, se vuelve un poco más complicado con, uh, las interacciones, nuevamente, um, cuando, cuando, cuando arrastramos un punto final, todavía tenemos tres, uh, tres puntos, pero también necesitamos mover esa manija intermedia. Um, y, y para hacer eso, bueno, obtenemos la distancia que teníamos antes, la especie de distancia doblada, la distancia entre la manija y el punto medio de esa línea entre las dos, uh, formas de inicio y fin. Y luego, cuando arrastro este, um, antes de mover realmente esta manija, tengo, ya sabes, puedo encontrar el punto medio y luego aplicar esa misma distancia en una perpendicular. Y ahí es donde colocamos la manija intermedia. Lo siento, esta diapositiva realmente no comunica eso de ninguna manera. Uh,

Así que encontrar el punto medio del cordón entre el inicio y el final y luego desplazarlo por esa distancia de curvatura en una perpendicular, uh, eso nos da la manija final, lo que nos permite crear un círculo, lo que nos permite crear un arco, lo que nos permite crear nuestra flecha. Y así es como nace una flecha con mejor apariencia. Estoy usando, usando intersecciones basadas en el, uh, ese círculo. Entonces, al final tienes una herramienta de flecha en Teal Draw, que es bastante buena. Um, como dije, cuando esto funciona, funciona porque cualquier cosa que hagas se verá bien. Um, y, uh, Teal Draw es como una especie de herramienta de diagramación, supongo, se trata de darte un conjunto limitado de opciones que siempre se verán bien sin importar lo que hagas. Um, por mucho que lo intentes, seguirá siendo bueno.

Hay otras cosas involucradas en las flechas de las que no hemos hablado. No hemos hablado de estas puntas de flecha, como estos pequeños puntos que ves aquí. Um, no hemos hablado de cómo elegimos los puntos de anclaje para las formas, aunque es bastante sencillo. Si puedes adivinar, entonces probablemente tienes la respuesta correcta. Um, y no hemos hablado de la especie de la, la gestión compleja del state management involucrada en asegurarnos de que las flechas se actualicen en el momento adecuado, um, en función de lo que ha cambiado, también es bastante complicado. Um, pero sí, eso es sobre las flechas en Teal Draw. Siento que las partes difíciles al menos. Así que gracias de nuevo por ver. Uh, puedes probar nuestras flechas en dos lugares. Primero, por supuesto, tealdraw.com, um, donde puedes probar el conjunto anterior de flechas que mostré, incluyendo las que se doblan de una manera que no esperarías. Uh, pero ya que has sido lo suficientemente amable como para ver esta, uh, esta charla video, um, también puedes echar un vistazo a la nueva versión de nuestras flechas que son un poco,