Drag handler for node elememts on GLSP editor.

[Abhay0294]

Hi,
Is there any way I can implement drag handler for node elements on the GLSP editor.

My requirement is as follows:

1. Whenever I drag the node elements on the GLSP editor, I should be able to console that dragging with console.log("dragging").

This is just the R&D for implementing the custom functionality on the draggability of the node.
Requesting you to kindly provide the suggestion for such implementation.
For the information, I'm trying to implement the below functionality for capturing the node dragability:
`@injectable()
export class EditorMouseListener implements IVNodePostprocessor {

@inject(TYPES.IActionDispatcher)
private actionDispatcher: IActionDispatcher;

decorate(vnode: VNode, element: SModelElement): VNode {
    if (element instanceof SModelRoot) {
        on(vnode, 'drag', this.positionUpdate.bind(this, element));
    }
    return vnode;
}

positionUpdate(element: SModelRoot, event: DragEvent): void {
    console.log('Dragging');
}

postUpdate(): void {
    /* To avoid eslint issues */
}

}`

It is hitting on on(vnode, 'drag', this.positionUpdate.bind(this, element)); but positionUpdate() function is not getting called.

[planger]

Hi @Abhay0294,

you can register a custom mouse listener, similar to how it is done e.g. in this module. The mouse listener you register should be a subclass of DragAwareMouseListener and can then overwrite e.g. mouseMove() and ask whether it is isMouseDrag() etc. and console.log in this overwritten method.

If you want to be able to enable and disable your mouse tool easily, you can wrap it into a tool, similar to how it is done, e.g. for the Marquee Tool.

Hope that helps!