Hybrid Bridge

El DOM es dueño del foco, el teclado, el IME, el clipboard y la accesibilidad. El canvas dibuja y manda la posición. El bridge es la capa de elementos reales que une las dos cosas.

Uso

<script>
  import { BridgePortal, bridge, useBridge } from 'essentia-core'

  const { keepFocus } = useBridge()
</script>

<BridgePortal>
  <input use:bridge={node} aria-label="Email" />
</BridgePortal>

BridgePortal renderiza sus children en la capa del bridge, hermana del canvas.
use:bridge proyecta el elemento sobre el nodo en cada frame que se renderiza, y solo escribe si la proyección cambió.
useBridge() devuelve el bridge, con keepFocus() para que un click sobre el canvas no le saque el foco a un input.

Costo

En reposo, 0 proyecciones y 0 escrituras de DOM.

Referencia

Miembro	Tipo	Default	Descripción
`layer`	`HTMLElement`	`—`	Capa DOM del root: hermana del <canvas> dentro del contenedor de Threlte, sin aria-hidden y con pointer-events: none (el puntero es del raycast). Del mismo tamaño que el canvas: su (0, 0) es el de ScreenTransform.
`attach`	`(el: HTMLElement, source: BridgeSource) => () => void`	`—`	Registra un elemento: lo muda a la capa si no está ahí, lo posiciona (position: absolute, transform-origin: 0 0) y le escribe width, height y transform en cada frame que Threlte renderiza, solo si la proyección cambió. Pide un render para la primera proyección. Devuelve la función que lo da de baja (no lo saca del DOM). Mudar solo es seguro con elementos creados por código. Un elemento que renderiza Svelte va dentro de <BridgePortal> y se registra con use:bridge: Svelte desmonta un bloque recorriendo sus nodos de hermano en hermano, y si el primero o el último ya no está ahí, borra nodos de los bloques vecinos.
`keepFocus`	`() => void`	`—`	Arma el focus guard: el próximo mousedown sobre el canvas no mueve el foco. Llamalo en el onpointerdown de un nodo antes de enfocar su elemento: interactivity() escucha pointerdown como pasivo, así que un preventDefault() ahí no evita que el mousedown siguiente mande el foco al body. El guard vale solo para el gesto actual.
`visibleRect`	`Readonly<VisibleRect>`	`—`	Parte visible del canvas, en px CSS relativos al canvas (el espacio de ScreenTransform): la intersección con el visual viewport, que se achica con el teclado virtual de iOS o con zoom de pellizco. Sirve para llevar a la vista el nodo enfocado. Reactivo: se actualiza con el resize y el scroll del visual viewport, el scroll de la página y el resize del canvas, y escucha solo mientras algún efecto lo lee. Fuera del navegador o antes de montar el canvas, todo en 0.

Anterior: Engine

Siguiente: Cámara y proyección