¿Qué hay bajo el puntero?

Hablemos de Tealdraw y hablemos de, entre todas las cosas, pruebas de impacto y clics, cosas así. Solo por curiosidad, ¿cuántas personas conocen Tealdraw o han oído hablar de Tealdraw? Hey, está bien, no está tan mal. Genial. Bueno, Tealdraw es un par de cosas diferentes. Es esto. Es una aplicación, tealdraw.com. Pizarra gratuita. Puedes mover cosas. Funciona un poco como Miro, funciona un poco como Excalitraw, si alguna vez lo has usado.

Tealdraw también es una startup que hace tealdraw.com. Y además de tealdraw.com, Tealdraw, la startup, también hace tealdraw.dev, que es el SDK que puedes usar para hacer cosas como esta. Tengo una larga lista de favoritos, pero siempre me gusta mucho este donde tienes una, yo no hice esto, por cierto, pero esta es una gran simulación de líquido. Fantástico. Se ejecuta en el navegador, súper rápido. Pero el autor también usó Tealdraw como una especie de entorno de edición usando la pizarra. No necesariamente para cosas de pizarra, sino usando parte de la geometría dentro de Tealdraw para interactuar con la simulación de líquido. Así que bastante impresionante lo que puedes hacer con Tealdraw.

Y la razón por la que esto funciona, y la razón por la que supongo que funciona como un SDK, es porque resolvemos muchos de los problemas realmente complicados involucrados en el lienzo por ti. Y puedes construir sobre eso. Si alguna vez has intentado construir una de estas cosas, es como un mapa o un editor de texto o algo así. Bastante complejo internamente, pero también esas partes complejas son simplemente la forma en que debería funcionar. Así que un buen lugar para un SDK. No tan lejos. Hoy, voy a hablar sobre lo que está bajo el puntero. Originalmente, esto era lo que estaba bajo el cursor. Pero luego sucedió el cursor, y pensamos que la gente se confundiría. Así que es lo que está bajo el puntero. Se trata de pruebas de impacto. La idea general de si has hecho desarrollo de juegos o cosas así, podrías haber pasado mucho tiempo en pruebas de impacto, todo el punto de, como, ¿qué estoy...? ¿Dónde está mi puntero? ¿Qué estoy sobrevolando? ¿En qué estoy a punto de hacer clic? Cosas así.

Así que vamos a entrar en ello. Cuando Tealdraw comenzó, era yo queriendo jugar con flechas y formas y texto y cosas así. Y asegurándome de que las cosas se unieran perfectamente y hacer todo este tipo de cosas de carrete de demostración. Pero para hacer eso, tuve que resolver algunos de estos problemas. Así que uno de ellos es cuando tienes un montón de diferentes tipos de formas, algunas de ellas están cerradas y abiertas y llenas y no llenas. Todas están superpuestas y cosas así. ¿Cómo determinamos sobre qué está pasando el usuario? Normalmente en el navegador no tenemos que pensar en eso, porque los botones simplemente funcionan cuando haces clic en ellos. Todos tienen oyentes de eventos que ocultan ese tipo de pruebas de impacto, etcétera, de ti.

En el antiguo Tealdraw, el Tealdraw original, usé eventos DOM para esto. Así que así es como funcionaría esto. También te lo mostraré por aquí. Déjame volver a eso. Así que tenías formas huecas, tenías formas llenas, tenías estas formas abiertas, que son ninguna de las dos. Y queremos seleccionar una forma hueca si estamos cerca del borde. No queremos tener que ir exactamente al borde, porque eso podría ser muy, muy delgado. Pero queremos estar cerca de él. Y para una forma llena, queremos estar cerca del borde o en el medio de ella. Esto funciona para formas abiertas también.

Y así, la forma en que hice eso en el Tealdraw original fue usando una especie de ruta SVG oculta. Así que todo en Tealdraw es tanto el antiguo Tealdraw como el nuevo Tealdraw es DOM, ¿verdad? Es un montón de componentes de React en el lienzo. El lienzo en sí no usa un elemento de lienzo, solo tiene componente de React, componente de React, componente de React, componente de React. Y aunque no lo creas, eso simplemente funciona. Puedes poner muchas cosas en el lienzo, incluso si es React. Tienes que tener mucho cuidado, pero puedes hacerlo. Así que en ese mundo, cuando estaba usando elementos DOM, tenías la forma normal. Y luego detrás de ella, estaba haciendo una especie de ruta oculta solo para absorber esa prueba de impacto del navegador, ¿verdad? Así que la forma negra tiene eventos de puntero ninguno. Pero esta especie de ruta oculta detrás de ella es la que tiene los eventos de puntero. Y así es como obtienes este tipo de, ya sabes, prueba de impacto cercana, ¿verdad? Bien. Ahora tendría que ajustar el tamaño de eso basado en el zoom. ¿Verdad? Porque necesitaba que estuviera en el espacio de la página o en el espacio de la pantalla en lugar de la página.

De todos modos, eso funcionó bastante bien. Pero tuvo algunos problemas. Esos problemas se veían más o menos así. Si las cosas se superponen, entonces ¿qué sucede aquí, verdad? Porque visualmente, esto es fácil. Pero una vez que están huecas, como el orden Z de las cosas, no se puede decir porque son ambas huecas.

Sin embargo, con elementos DOM, como, cualquier cosa que se golpee primero, esa es la cosa que recibe el impacto. Así que eso es un problema. Es que las áreas de impacto reales se verían más o menos así. Pero eso no estaría disponible para el usuario. Así que ese fue un problema. El otro era que cuando las formas estaban realmente cerca una de la otra, bueno, eso es justo de lo que hablé. Necesito alejarme un poco.

Cuando las formas estaban realmente cerca una de la otra, ese es otro lugar donde esas superposiciones ocultarían cosas. Y así, si tu puntero está justo aquí, justo en medio, una sería seleccionada, incluso si estuvieras realmente cerca de la otra. Eso no es lo que quieres. Así que no se puede hacer eso. El apilamiento Z arruina todo, como usar estos pseudo, como, rutas SVG de objetivo táctil. No se puede hacer eso. Además, las pruebas de impacto no son gratuitas en el navegador. En Tealdraw, puedes tener miles y miles de formas en el lienzo.

Y nos dimos cuenta de que simplemente pasaba tiempo en cada fotograma, simplemente trabajando a través de ese DOM, tratando de encontrar lo que realmente está debajo del puntero. Sorprendentemente ineficiente, dado que es una especie de cosa del navegador que se supone que obtienes gratis. Y para empeorar las cosas, con el tipo de enfoque de estilo DOM para las pruebas de impacto, están las flechas. Porque cuando estoy arrastrando una flecha, que es algo que espero hacer mucho en Tealdraw. Déjame deshacerme de esto para que las flechas funcionen un poco mejor. No estoy realmente... Como, mi puntero está como, capturado por esto. Como si estuviera arrastrando... Y ya no está haciendo pruebas de impacto contra el DOM, porque el puntero está capturado por ese elemento que estoy arrastrando.

Y así necesitábamos una forma diferente de reconocer, como, cuando el usuario está pasando el cursor sobre el lienzo. Lo que significaba que necesitábamos hacer una representación geométrica del lienzo en JavaScript de todos modos en memoria, y luego hacer pruebas de impacto contra eso. Lo cual era terrible, porque ahora tenemos dos formas diferentes de hacer pruebas de impacto. No quiero eso. Así que vamos a retroceder por completo. Teníamos estas dos estrategias diferentes. Teníamos estos caminos de área de objetivo de clic, toque basados en DOM que estaban ocultos para el usuario, pero que en realidad estaban allí. Y luego teníamos este otro sistema, este sistema muy rudimentario de polígonos. Y haces, como, pruebas de impacto normales de punto y polígono contra eso. Y decidí... Está bien. Vamos a deshacernos de uno de ellos. ¿De cuál podemos deshacernos? Podemos deshacernos del DOM. Así que vamos a ir hasta aquí. Y hagamos un sistema geométrico completamente diferente.

Así que esto es un poco divertido. Porque esto fue... Lo siento. Tengo hadas aquí, escondiéndose al frente. Más sobre eso más tarde, tal vez. Te diré qué.

Esta es la vista de depuración de geometría del lienzo. Esto es lo que ve el editor. Porque el editor es como una clase que gestiona el estado del lienzo, que gestiona todos los datos en el lienzo. Y eso, como, existe por separado del propio lienzo. Que se está renderizando usando React. Pero queremos mantener esos datos fluyendo en una sola dirección. Tanto como sea posible.

Así que antes estaba bien. ¿Sabes? Estás moviendo el puntero alrededor. Está enviando eventos de vuelta al editor. Pero... Y ahora todavía estás enviando la posición del ratón. Pero el impacto está siendo determinado por el propio editor. Así que mientras muevo mi cursor, puedes ver que está midiendo la distancia a todas estas diferentes polilíneas y polígonos y demás. Y usa esa distancia para determinar qué está siendo sobrevolado. Pero también... Como que hay más.

Y eso más es de lo que voy a hablar por el resto de la charla. De cómo exactamente determinamos qué está siendo sobrevolado y qué no. Para... Y como... Sí. Esto... Aunque este es un lienzo grande. No sé si puedes verlo. No sé si tengo este modo activado. Pero puedes ver cómo funciona. Tenemos esencialmente una polilínea siendo creada para formas abiertas. Y para formas cerradas, tenemos la forma en sí. Y este cuadrado en el medio es en realidad su etiqueta.

Así que queremos poder... No puedo mostrarte. Porque no estamos mostrando el lienzo. Pero sí. Lo creas o no, estoy escribiendo en eso. Y creo que si muestro las formas de nuevo... Oh, no. Requirió eso. Lo que sea. Ahí está el... A lo que me refiero con etiqueta. Así que la buena noticia es que esto resuelve muchos problemas para nosotros. El problema de muchas y muchas formas y el propio navegador. Su prueba de impacto es un poco lenta. No tenemos que lidiar con nada de eso. Simplemente aplicamos eventos de puntero, ninguno en todo el asunto. Y hemos terminado. ¿Verdad?

Porque vamos a manejar esa detección de impactos nosotros mismos dentro de... Nuestra propia tierra de JavaScript. Aún más que eso, en realidad no queremos... Queremos garantizar que no se realicen pruebas de impacto contra el lienzo. Incluso con indicadores u otras cosas que podrían ser clicables. Así que cuando estás haciendo una interacción que haría imposible hacer clic en algo, en realidad traemos otro elemento frente al lienzo con eventos de puntero todos activados para absorber cualquier impacto. Porque el navegador trabajará de adelante hacia atrás con las pruebas de impacto. Así que si alguna vez quieres simplemente no hacer ninguna prueba de impacto, simplemente pones algo al frente, capturas ese evento, y no llegará más lejos.

Sin embargo, hay algunos desafíos. ¿Qué pasa cuando tienes muchas de estas formas dibujadas a mano complicadas o algo así? Y me estoy moviendo. No quiero que este sistema esté iterando a través de cada una de esas polilíneas, esencialmente, tratando de encontrar... Bien, ¿cuál es la distancia? ¿Es esa la más cercana? ¿O es lo suficientemente cercana como para registrarse como un impacto? Etcétera. Así que hacemos algo bastante común.

De nuevo, especialmente si has hecho algún tipo de desarrollo de juegos, especialmente. Lo que hacemos es... O cualquier algoritmo. ¿Verdad? Haces una fase amplia, y luego haces una fase estrecha. Te deshaces del trabajo. Y luego haces el trabajo del que tienes que deshacerte. Así que en este caso, puedo simplemente mirar los cuadros delimitadores de todas estas cosas. Y si este es mi cursor, puntero, lo que sea, entonces no está dentro de ninguno de esos cuadros delimitadores. Así que en realidad no tengo que hacer ese tipo de búsqueda... Bien, ¿cuál es la distancia a esta línea de trabajo? Porque sé que no está dentro de ninguno de los cuadros delimitadores, o puedo expandir un poco estos cuadros delimitadores. Que es algo que creo que hacemos. Y de cualquier manera, simplemente no me ocupo de ninguno de ese trabajo.

Es solo cuando el puntero está dentro de uno de estos cuadros delimitadores que realmente verifico como... Sí, está bien, estamos dentro del cuadro delimitador, pero ¿realmente estamos haciendo clic en él o no? Lo único... Las cosas se complican cuando las cosas se superponen. Pero en general, simplemente no lo hacen. Y de cualquier manera, no tienes todo el lienzo superpuesto. Esa es una forma en que resolvemos eso. Y por supuesto, los otros problemas. Cosas como... Bien, esto es... Hay dos formas que están realmente cerca una de la otra. ¿Cuál debería resaltar? ¿Debería resaltar esta o esta? ¿Cuál está siendo clicada?

O... Bien. En realidad hay un par de formas. Hay una dentro de otra. El usuario está haciendo clic. ¿En cuál está haciendo clic? ¿En cuál están haciendo clic? Ese es un problema que también se puede resolver. Simplemente escribimos un montón de código. Pasamos por ello y decidimos...

Sí, ¿sabes? Simplemente escribes el código. Simplemente... Sabes, es como un árbol de decisiones que simplemente sigue avanzando. Esto es en su mayoría comentarios. Porque esto es algo complicado. Lo revisaré juntos. Este es el árbol de decisiones. Lo mejor que puedo extraer de eso. Te enviaré un enlace a todo este tablero, si quieres.

Y luego podemos... Pero mientras tanto, repasaré algunas de las grandes decisiones que tomamos. Primero, lo básico. Las formas pueden ser huecas, las formas pueden ser rellenas. Comenzamos en la parte superior. Muy arriba del lienzo. Todo está en un orden Z. De frente hacia atrás. Y seguimos hasta que llegamos al lienzo.

O hasta que algo nos detiene. Así que un ejemplo de algo que te detiene sería esta forma rellena aquí. Esto es hueco. Está en la parte superior. Hagamos esto rojo para que puedas verlo. Aunque esta cosa está en la parte superior, es hueca. No tiene relleno. Así que pasamos a través de ella. Pero pasamos a través de ella. Y golpeamos algo que está relleno. Y es entonces cuando nos detenemos. Simple.

Si hacemos clic cerca del borde de una forma hueca, entonces seleccionamos la forma hueca. Es una de las formas más fáciles de comenzar. Si nosotros... Aquí vamos. Así que, sí. Las formas rellenas detendrán la búsqueda. Pasamos a través de las formas huecas. Pero tan pronto como golpeamos una forma rellena, esa es la forma que vamos a devolver. Si llegamos al lienzo, entonces vamos a golpear la forma más pequeña en la que estamos dentro de. La forma hueca más pequeña en la que estamos dentro. Y esto funciona tanto para flechas como para pruebas de impacto. Ahora, eso es independientemente del orden Z, ¿verdad? Como si tuviera... Por cierto, ¿tiene esto algún sentido? Normalmente solo muestro cosas de IA. Bien. Genial.

Lo cual puedo y haré si el Uber de este otro tipo no aparece. Así que aunque esta forma esté... Pongámosla completamente en la parte de atrás. Esta seguirá siendo el tipo de forma que golpeamos porque es la forma más pequeña en la que estamos dentro. Porque es como debería funcionar. En realidad, hay mucha experiencia de usuario intuitiva dentro de un lienzo. Lo cual es genial porque como usuario, no tengo que aprender todo. Si agarro algo que está frente a otra cosa, espero agarrar lo que está frente a ella, ¿verdad? No obtienes eso a menudo en el software. Definitivamente no lo obtienes siempre. Sin embargo, resulta que la vida real es muy complicada. Y así, tratar de capturar todo eso dentro de algoritmos, dentro del código es realmente divertido. Pero también difícil.

Si el puntero está entre... Está lo suficientemente cerca de un borde para seleccionarlo, pero hay múltiples bordes que estás lo suficientemente cerca para seleccionar, entonces tienes que elegir el más cercano. Así que llegas hasta el lienzo.

Has llegado al lienzo. Compruebas... ¿Estaba cerca de algún borde? Y si lo estaba, ¿cuál es el más cercano? Ese es el que usas. Lo cual es genial poder hacer este tipo de... Obviamente, en el método DOM que usamos al principio, no podías hacer estas cosas. Porque tan pronto como golpeaba cualquier elemento, se detenía. Pero ahora puedo hacer todo este tipo de comparaciones. Construir algo más de lógica en ello. Como etiquetas.

Incluso si la etiqueta... Incluso si la etiqueta está un poco más atrás y estás bastante cerca de un borde, si estás en una etiqueta, entonces vamos a seleccionar la etiqueta. Porque generalmente eso parece ser la forma de hacerlo. Y finalmente, hay marcos en TealDRAW que contienen el clip... Recortan las formas que están dentro de ellos. Pero también... Así que puedo seleccionar las formas dentro de un marco, pero no puedo seleccionar cosas detrás del marco. Así que si he llegado al tipo de parte trasera de un marco... Incluso si hay formas todavía debajo de él, simplemente me detengo. No selecciono el marco. Simplemente me detengo. Es como otro lienzo.

Y eso te impide hacer clic en cosas dentro. Y por supuesto, solo comprobamos la parte enmascarada de la forma. Así que no puedo hacer clic o seleccionar las partes de esta forma que están un poco ocultas. Barra lateral, solo porque creo que es genial. Si arrastro esta forma hacia afuera, se cae. Si redimensiono esto, se caerá. Si tengo una forma que es así, y la redimensiono de esa manera, no la he soltado. El cuadro delimitador todavía está en el marco. ¿Verdad? Todavía está superponiendo el marco, pero la geometría no lo está.

Y dado que tenemos ese sistema de geometría antes, tenemos eso, ya sabes, lo que sea, como una pequeña vista de alambre, esta representación de datos. Como podemos verificar contra eso y hacer que se caiga, ya sabes, usando eso. Es realmente algo muy, muy genial tener estos dos sistemas separados.

De todos modos, los marcos detienen la selección. Ese es en realidad mi masterclass. Esa es en realidad la forma en que haces la prueba de impacto en TealDRAW. Lo cual es la primera vez que termino una masterclass a tiempo en mucho tiempo.

TealDRAW.com si quieres jugar con el white board. TealDRAW.dev si quieres construir algo con el white board. Tenemos pequeñas hadas de IA llegando el lunes, que son como pequeños agentes en el lienzo, y esto debería ser bastante divertido. Construirán cosas para ti. Hablaré de esto la próxima vez. ¿Qué deseas que hablara de eso? Está bien. Les prometí que no lo haría. Pero sí. Sigue a TealDRAW en Twitter o X o lo que sea. Y... Estoy haciendo esto. Encuéntrame más tarde. Estaré por aquí. Te mostraré el resto de estas cosas. Muchas gracias.

Tenemos muchas preguntas llegando. Soy el maestro de ceremonias, así que puedo sembrar mi pregunta primero. Me encanta lo intuitivo que has creado los controles y esas cosas. ¿Cómo pensaste en esa jerarquía de diferentes pasos, diferentes comprobaciones, todo eso tipo de... Ese flujo lógico, para obtener esa sensación realmente intuitiva? Sí. Creo que es... Simplemente uso mucho la aplicación. Quiero decir, esto es lo mismo para la mayoría de los productos. Encontrarás el tipo de diseño latente de un producto simplemente usándolo mucho. Y diciendo... Si estoy haciendo clic en esto, y no se está seleccionando, ¿por qué no? Si hay esta heurística, esta regla que estoy usando aquí sobre la distancia al borde, ¿cómo se cruza con este otro sistema sobre etiquetas o algo?

Hay un juego llamado Dwarf Fortress, que tal vez algunas personas en la sala... Esta sala podría conocer. Donde tienes todos estos diferentes sistemas, como los enanos pueden emborracharse, pero también pueden sangrar. Y cuando agregaron el sistema de embriaguez, eso afectó al sistema de sangrado, porque si tienes menos sangre, entonces te emborrachas más. Y así es como se siente TealDRAW. A medida que agregamos cosas como etiquetas, tuvimos que decir, oh, este sistema interactúa con este otro sistema. Y luego simplemente capas esos sistemas una y otra vez. Y de nuevo, esto es lo que hace que Canvas sea tan difícil, porque hay tantos de estos sistemas. Pero realmente solo fuerza bruta. Solo úsalo, úsalo, úsalo, hasta que descubras cuál debería ser la lógica. Puede ser difícil, pero estás haciendo un gran trabajo con eso.

Muy bien. Vamos a sumergirnos en algunas de las preguntas. Vamos con un tipo que tiene miedo de los ingenieros de QA. Han dado muchas preguntas hoy. ¿Cuál es la forma más extraña que rompió el código de prueba de impacto? Creo que son los polígonos cerrados auto-intersectantes dibujados. Así que si puedes imaginar, como, el símbolo de infinito, ¿verdad? O si puedes imaginar tal vez, como, ¿es un símbolo de Airbnb, donde tiene un bucle dentro de él? ¿Como este? Como un tipo de clip de papel. Ese medio del bucle es realmente difícil de identificar, si estás dentro de la forma o fuera de la forma. Porque muchos de los tipos normales de polígonos, ¿estoy dentro del polígono o fuera del polígono se rompen en ese escenario.

A menos que hagas muchas cosas complicadas adicionales para construir esencialmente múltiples polígonos a partir del polígono auto-intersectante, y luego verifiques contra cada uno de esos y veas si tienes un número impar. O incluso, ya sabes, ese tipo de cosas locas. Así que sí, si vas a dibujar, y dibujas una forma tipo clip de papel, algunas de las pruebas de impacto podrían no funcionar tan bien como estás acostumbrado. Pero la mayoría de la gente no lo hace. Tienes que aceptar tus pérdidas en algún lugar. Siempre va a haber uno. Observa al ingeniero de QA llevar eso al siguiente proceso. Estamos contratando, por cierto, si te gusta este tipo de cosas. Genial.

Hay que decirlo. Y hablaste sobre cómo esto es TLDraw 2.0 o .lo que sea. ¿Alguna vez has deseado, y tal vez si hay un 3, que construiste sobre el canvas en lugar del DOM? No, en realidad esta fue probablemente una de las mejores decisiones que tomé con TLDraw. La buena noticia es que si no quieres usar el DOM para renderizar, puedes simplemente quitar esa capa completamente y añadir la tuya propia. Así que la gente ha traído renderizadores WebGL para TLDraw. Sin embargo, la mayoría de los equipos que trabajan con TLDraw como un SDK, y la mayoría de las cosas que hacemos que son especiales, supongo, sobre TLDraw, realmente aprovechan el hecho de que está hecho simplemente de cosas web normales. Así que poner videos en el canvas es trivial. Poner iframes en el canvas es trivial. Poner iframes en el canvas e intercalarlos con otras formas es trivial. Y sí, creo que desde una perspectiva de SDK, como los clientes con los que trabajamos, las empresas con las que trabajamos, la mayoría de sus productos no son productos de edición gráfica donde realmente se benefician de ese techo alto o techo alto de como, controlamos todo el renderizador, que obtienes con Canvas y WebGL, etcétera. La mayoría de ellos son como, quiero llevar mi panel de control, como mi panel de control de AWS y ponerlo en un canvas para poder alejar y verlos todos. O quiero, ya sabes, quiero tener las mismas listas de tareas, ya sabes, si eres ClickUp, como del resto de ClickUp. Quiero tenerlas en el canvas también. Así que no, en realidad la web es como una tecnología bastante buena para este tipo de aplicación. Tienes, esto es la web en esteroides hasta cierto punto. Es solo una aplicación de React. Es una aplicación de React realmente complicada, pero es honestamente React hasta el final. Bien.

Hablando de eso, ¿usas alguna vez WebAssembly para procesos web complejos? Quiero decir, las cosas que usarían WebAssembly serían como esa simulación de líquido que mostré antes. Ese es otro caso donde, bueno, no han eliminado nuestro renderizador. Simplemente quitaron el fondo y pusieron otro renderizador detrás, ¿verdad? Pero eso está funcionando en, creo que WebAssembly y ciertamente el, si tuviera otros cinco minutos, te mostraría la cosa rara de la cámara que puedes hacer con eso, donde puedes, lo que sea, usa ML en el navegador para como usar tu cámara web y crear geometrías basadas en tu, donde están tus manos y cara y cosas así.

Eso es usando WebAssembly. Pero esas son, son como cosas que otras personas construyeron con TealDRAW, no yo, pero ya sabes, es la web. Simplemente funciona bien con otras cosas. Simplemente es lo que quieres. Eso es increíble.

Y recuerda, si quieres ir a verlo con él, estará abajo en una sesión de preguntas y respuestas en persona, así que también puedes mirar su portátil y ver algunos otros ejemplos geniales. Realmente me gusta el de líquido.

Y este de un tipo que tiene miedo de los ingenieros de QA de nuevo, si el puntero aterriza exactamente entre dos formas y tal vez no solo entre dos formas, porque lo mencionaste, pero tenías este tipo de conjunto de lógica en cascada, ¿es posible que dos objetos puedan aún estar al mismo nivel de esa lógica? ¿Y luego cómo eliges entre ellos? Esa es una muy, muy buena pregunta. Supongo que rompemos el empate basado en lo que sea que tenga el índice Z más alto, el orden Z, porque eso va a ser único para cada capa. Así que rompemos muchos empates usando lo que está delante versus lo que está detrás. Si necesitas otra solución, puedes organizar unos mini Juegos del Hambre. Podría organizar unos mini Juegos del Hambre. Esa podría ser una buena solución. Iterar hasta que solo quede uno.

Y luego otro, que es calcular dentro de un marco. ¿Es como un cálculo recursivo solo dentro del contexto de dentro del marco? Funcionalmente, sí, pero no realmente. Cuando nosotros, así que el canvas en Tealdraw es plano. Es como una lista plana de cosas. Incluso cuando las cosas están dentro del marco, lo creas o no, el DOM es plano. No estamos realmente usando elementos HTML para recortar. Estamos calculando una máscara CSS para todos los hijos de ese marco. Así que si algo es como, parece que está siendo recortado por el marco, en cuanto al navegador se refiere, esas cosas no están anidadas. Esas son planas. Es solo que estamos creando dinámicamente una máscara CSS alrededor del objeto recortado, lo cual es un poco lo que el navegador hace de todos modos. Y es simplemente más rápido, lo creas o no. Así que sí, simplemente tratas toda la página como una lista plana. Y el resultado es el mismo. Es solo que, porque estamos usando esas máscaras, no necesitamos entrar en un marco. Simplemente lo tratamos igual, de arriba, al frente, desde tu perspectiva, de frente a atrás. Y eso simplemente funciona.

Espero que eso tenga sentido. Es una buena pregunta, por cierto. Y sí o no, última pregunta de un tipo que tiene miedo de los ingenieros de QA. Gracias por alegrarme el día. Esto es divertido.

¿Es el lienzo infinito lo suficientemente infinito como para ocultar los errores de QA? Nadie ha llegado al final del lienzo. Así que podría haber errores aún por ahí. Bueno, esta persona, viaje a donde nadie ha ido antes, y al final del lienzo infinito.

Muchas gracias, Steve. Démosles un aplauso.