How to get drag and drop(DnD) hook on glsp editor for dropping an element from custom view?

Hello,

I am working on a requirement where I need to drag an element from custom view and drop it to glsp editor. So the requirement is to add the same element into glsp editor. However I could able to get DnD hook in my custom view. Below is the screenshot for reference.

I appreciate any hints or tips what might be required to get drag and drop hook in glsp editor? Thanks in advance!!

Thanks,
Mishal

cc @JonasHelming

I am able to get a hook by implementing IVNodePostprocessor class where I am registering an event listener and bind the same class in container module of glsp editor. Thanks a lot :slight_smile:

Hi @mishal, glad you managed to solve the issue! I think that is a very good solution.

Just for completeness: If you already provide a custom diagram widget you can add an event listener after the widget was attached

this.addEventListener(this.node, 'drop', evt => this.onDrop(evt), true);

and just hook in your custom behavior:

 protected onDrop(event: DragEvent): void {
    // do something
 }

In order to create a custom diagram widget, you need to configure a custom diagram manager in the GLSPTheiaFrontendModule.

However, I think the post processor approach is actually simpler and better portable, as you could also use it, for instance, in the VS Code integration.

1 Like

Thanks @martin-fleck for sharing this information.