How to implement onclick event on any node or edge?

[JanKoehnlein]

Usually, you have to create a mouse listener, implement the method for the event and then bind it as TYPES.IMouseListener in your di.config.ts. The actual consequence of the click usually is an action. If the SModel should be changed, create and register a command handling the action.

[Dipinrajc]

Could please provide an example for the same?

[JanKoehnlein]

Could you be more specific about what you're trying to achieve? A mouse click is usually already consumed as a select action. Maybe you're rather interested in selection changes? Or you want to add some button like behavior?

[Dipinrajc]

I need to show a modal/popup while clicking on an edge.

[JanKoehnlein]

I'd try to add an action handler for SelectAction (caution: unchecked code)

export class MyActionHandler implements IActionHandler {
  handleAction(Action a) {
     if(a instanceof SelectAction) {
       // investigate if a single edge is selected and in this case open the dialog
     }
  }
}

export MyActionHandlerInitializer implements IActionHandlerInitializer {
    initialize(registry: ActionHandlerRegistry) {
       registry.register(SelectAction.KIND, new MyActionHandler())
    }
}

In your di.config.ts

bind(TYPES.IActionHandlerInitializer).to(MyActionHandlerIntializer)

[Dipinrajc]

OK, Thanks.

[JanKoehnlein]

If you need to access the model as well, then I'd rather bind a custom model source, have a look at the register and handle methods in https://github.com/TypeFox/theia-xtext-sprotty-example/blob/master/theia/states-dsl/src/browser/diagram/states-diagram-server.ts

[Dipinrajc]

Ok