In my Angular application, I am using Two.js to draw an SVG image. After drawing the SVG with some elements in Two.js, I add event listeners to its elements like so:
this.courtRenderer.update(); // once this command is executed, Two.js will draw the SVG
for (const trajectory of this.trajectories) {
trajectory.renderedLine._renderer.elem.addEventListener('mouseenter', (event) => {
this.onRenderedLineMouseEnter(event, this.trajectories.filter((selectedTrajectory) =>
selectedTrajectory.renderedLine.id === trajectory.renderedLine.id));
}, false);
trajectory.renderedLine._renderer.elem.addEventListener('mouseleave', () => {
this.onRenderedLineMouseLeave(this.trajectories.filter((selectedTrajectory) =>
selectedTrajectory.renderedLine.id === trajectory.renderedLine.id));
}, false);
}
After setting up the event listeners, there is a handler that changes the line width and color, as well as triggers a service to open a popup at the position of the mouse.
private onRenderedLineMouseEnter(event, trajectories){
let renderedLine;
for (const trajectory of trajectories){
renderedLine = trajectory.renderedLine;
renderedLine.linewidth = renderedLine.linewidth * this.appConfig.courtRenderer.highlightedTrajectoryWeight;
renderedLine.stroke = this.appConfig.courtRenderer.colors.highlightedTrajectory;
}
this.courtRenderer.update();
const popupPosition = new PopupPosition(renderedLine.id, event.layerX, event.layerY);
this.virtualCourtService.selectShot(popupPosition);
}
However, the functionality does not work properly until I open the console in the browser by pressing F12. It's strange because everything works fine after that. Any idea why it doesn't work initially?
Edit: I noticed that when I set a breakpoint in the "onRenderedLineMouseEnter" method and trigger the mouseenter event on the line, the code works without relying on the Inspector tool.
I even added some console.log statements to the method, and whether or not the Inspector is open, the code executes. But only with the Inspector (or a breakpoint), the UI changes are reflected visually.