Actualmente estoy tratando de hacer que la interacción PIXI funcione con elementos DOM. Mi objetivo es el siguiente: cuando el usuario desplaza un bloque, quiero mostrar un menú desplegable (un <div> rojo por ahora), y cuando sale del div, quiero que la interacción regrese al lienzo.
Para hacerlo, estoy usando PIXI.InteractionManager y su método setTargetElement . Al principio, el objetivo es el lienzo y, cuando se muestra el cuadro rojo, se convierte en el elemento objetivo. Hasta ahora, todo funciona como se esperaba. Pero cuando el cursor sale del cuadro, estoy usando setTargetElement y le doy el lienzo, y luego hay un problema extraño, como se muestra en el gif.
En el gif, puede ver que el círculo sigue al cursor sin problemas, luego desaparece en el cuadro rojo (lo cual no es un problema) y luego, cuando el cursor sale del cuadro, el círculo tiene una especie de efecto de escala ( no es un desplazamiento fijo porque en 0,0, el cursor y el círculo se superponen).

En una versión simplificada, esto es lo que hago:

 // Creates the circle that follows the pointer initialization() { this.app.stage.on('pointermove', (e) => { circle.position.copyFrom(e.data.global) }) } // When the blue box is hovered onHoverBlock() { // Get the red box from the DOM const redBox = document.getElementById('red-box') // Tell the interaction manager to target the box this.app.renderer.plugins.interaction.setTargetElement(redBox) } // Called on the `mouseleave` of the red box onMouseLeaveRedBox() { // Assign the canvas back to the interaction manager this.app.renderer.plugins.interaction.setTargetElement( this.canvasReference ) // From this point, the circle doesn't follow the pointer anymore 😟 }

¿Sabes lo que está pasando y cómo solucionar este problema?