How to addEventListener to svg nodes?

[com-nvidia-yohuang]

I realize that the svg elements are available only after rendering. I tried to addEventListener in the final block like below. But the allSvgNodes is empty array.

Maybe I should get the element from mouseEvent, and addEventListener for the element then?

thanks.

elk.layout(graph)
   .then(g => {
       var sGraph = new elkgraph_to_sprotty_1.ElkGraphJsonToSprotty().transform(g);
       modelSource.setModel(sGraph)
   })
   .catch(function (e) {
       console.log(e);
   })
   .finally(() => {
      var allSvgNodes = [...document.getElementById('sprotty').querySelectorAll("*")]
      ... code to add listener
      })

[spoenemann]

The actual rendering of SVG elements happens asynchronously. I'm not sure, but you could try

return modelSource.setModel(sGraph);

and change the finally block to another chained then.

[com-nvidia-yohuang]

Hi Spoenemann,

allSvgNodes now has one element [svg#sprotty_EMPTY] after making the changes as you suggested.

thanks.

[spoenemann]

Ok so the following DOM updates are not captured by the promise returned by setModel.

We could consider adding a listener mechanism to the Viewer component. In the meantime, you could try registering a IVNodePostprocessor, which is notified after a rendering update. See examples here:

https://github.com/eclipse/sprotty/blob/ae671b54aa48f991ca036906bd04ac0ad309ab9f/src/base/di.config.ts#L132-L147

[com-nvidia-yohuang]

I extended MouseListener to print the element clicked in doubleClick handler, and I can see the right node element printed. I can get the Node information from the (target, event) parent of the handler.

Thanks a lot!

I am experimenting other potential choices to see if we can decouple the event listener from sprotty code to make the sprotty related code more reusable in different similar applications.