Composer interaction event listeners

[Benjaki2]

Hello!

I am wondering if there is way to access hover and click events on atoms and bonds... or do I need to create my own listener? Ideally, the event listener would pass a parameter with the atom or bond object that is being hovered(or clicked).

Thanks for your help!

[partridgejiang]

Hi @Benjaki2, currently there is no such a event for detecting the object hovering, but you can make your own by listening to pointermove html event with ease:

Kekule.X.Event.addListener(composer.getEditor().getElement(), 'pointermove', function(e) {
        var offsetCoord = e.getOffsetCoord(true);
        var obj = composer.getEditor().getTopmostBasicObjectAtCoord(offsetCoord);
        if (obj)   // hovering on an object
          console.log(obj.getClassName(), obj.getId());
      });

Similar code can also be used to handle the click event. In addition, the selected objects will change when the user clicks on a object, so you may listen to the selectionChange event as well:

composer.on('selectionChange', function(e) {
  var selectedObjs = composer.getSelection();  // an array of selected objects
  // ...
});

[Benjaki2]

thanks so much for this @partridgejiang !