How to react on MouseMove events?

[rsoika]

Hi,
I want to implement a UIExtension that reacts on MouseMove events (when the user drags a element in the diagram) to show custom helper lines within the diagram.

But I am unclear how to react on mouse events in my UIExtension the right way. Is there something similar to the SelectionService which provides a convenient way to react on the selection of a node element?

I have seen that there is a FeedbackMoveMouseListener which may do something like that? Or can the GLSPTool be helpful for this? Or should I implement the MouseListener in my UIExtension class?

[rsoika]

The solution I developed so far is to implement my own custom MouseListener and register this listener using the MouseTool:

@injectable()
export class BPMNHelperLine extends AbstractUIExtension {

	protected bpmnMouseListener: BPMNMouseListener;
	static readonly ID = 'bpmn-helper-line';

	@inject(TYPES.MouseTool)
	protected mouseTool: IMouseTool;

	@postConstruct()
	postConstruct(): void {
		this.bpmnMouseListener = new BPMNMouseListener();
		this.mouseTool.register(this.bpmnMouseListener);
                ..........
	}

	id(): string {
		return BPMNHelperLine.ID;
	}
        .............
}

export class BPMNMouseListener extends MouseListener {
	private _isMouseDown = false;
	private _isMouseDrag = false;

	override mouseDown(target: SModelElement, event: MouseEvent): Action[] {
		this._isMouseDown = true;
		console.log('======== > BPMNMouseListener mouseDown... targetID='+target.id);
		return [];
	}

	override mouseMove(target: SModelElement, event: MouseEvent): Action[] {
		if (target) {
			console.log('======== > BPMNMouseListener mouseMove... target='+target.id);
		} else {
			console.log('======== > BPMNMouseListener mouseMove... NO target=');
		}
		if (this._isMouseDown) {
			this._isMouseDrag = true;
		}
		return [];
	}

	get isMouseDrag(): boolean {
		return this._isMouseDrag;
	}

	get isMouseDown(): boolean {
		return this._isMouseDown;
	}
}

Is this a recommended approach to react on the movement of node elements?

[planger]

Hi,

the common approach to react to mouse events is to register a mouse listener in a DI module:

bind(TYPES.MouseListener).to(YourMouseListener);

Alternatively, you can also do it as you suggested "programmatically":

this.mouseTool.register(new YourMouseListener())

The common approach based on DI is preferred in many situations as it is more concise and your mouse listener can directly get other implementations injected, as it is instantiated by the DI module.

In both cases, you mouse tool will be always enabled (with DI) or always enabled as soon as you programmatically register it until you programmatically unregister it.

If you want to be able to enable or disable that, e.g. only when the default tools are active, but not when a node creation tool is active, you'd have to register a default tool:

bind(TYPES.IDefaultTool).to(YourBoundsTool);

which then programmatically registers your mouse tool as mentioned above.
An example is the change bounds tool in GLSP, which is registered in the toolsModule.

So if your UI extension needs to track the mouse, I think your approach is perfectly fine! But I recommend to ensure that your UI extension unregisters the mouse listener again, when the UI extension is removed.

Do you mean with helper lines, some visual feedback to e.g. align elements? If yes, I'm not sure I'd implement that as a UI extension, but rather as a tool that dispatches feedback, similar to the marquee tool, but part of the default tools (alongside the change bounds tool).
I think such a feature would be nice to have in the generic GLSP: helper lines to align elements appearing appear when you move your elements. It would be even greater, if this would be combined with some snapping behavior (e.g. see GridSnapper for example). What do you think? Feel free to open an issue for that. A PR would be very welcome with that feature?

[rsoika]

Thanks for your feedback. Yes, I plan to implement some helper line behaviour like in draw.io. I will provide my solution as soon as it is working.