How to register a Mouse Listener for Double-Click Events?

[rsoika]

I have implemented a AbstractUIExtension with additional EditModeListener and SelectionListener so that my extension can react on different GLSP actions.

Now I need in addition to react on a Mouse-Double-Click event. I can't figure out how to add some kind of MouseListener. I found already this discussion: #705 , but I do not understand this discussion at all. Should I implement the MouseListener and inject the MousePositionTracker??

@injectable()
export class MyUIExtension extends AbstractUIExtension implements EditModeListener, SelectionListener, MouseListener {
    @inject(EditorContextService)
    protected readonly editorContext: EditorContextService;

    @inject(SelectionService)
    protected selectionService: SelectionService;
    
    @inject(MousePositionTracker)
    protected mousePositionTracker: MousePositionTracker;

    editModeChanged(_oldValue: string, _newValue: string): void {
      ....
    }
    selectionChanged(root: Readonly<SModelRoot>, selectedElements: string[]): void {
     .....
    }
 ...
}

But this would mean I have to implement all the mouse event methods? This seems to be wrong?

Can someone explain how to add a Mouse-Double-Click listener into a AbstractUIExtension?

[planger]

To register a mouse listener you'll have to add an injectable class that extends MouseListener:

@injectable()
export class YourMouseListener extends MouseListener {
    doubleClick(target: SModelElement, event: MouseEvent): (Action | Promise<Action>)[] {
        // TODO your implementation
        // this can return an action or get other services injected and call them on double-click
        return [];
    }
}

You only need to override the methods (mouse events) that you are interested in. The super class MouseListener has empty implementations by default. From such a method you can either return actions, which will be dispatched by the framework, or you can put in arbitrary code, e.g. get services injected and invoke them.

To register YourMouseListener you'll have to add the following to a di.config.ts:

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

In order to combine that with your MyUIExtension you have three architectural options.

1. Either you register MyUIExtension directly as a MouseListener. MyUIExtension then would need to extend MouseListener and implement the doubleClick method (see also above):

bind(MyUIExtension).toSelf().inSingletonScope();
bind(TYPES.IUIExtension).toService(MyUIExtension);
bind(TYPES.MouseListener).toService(MyUIExtension);

2. You inject MyUIExtension into YourMouseListener and invoke it on double-click.

@injectable()
export class YourMouseListener extends MouseListener {
    @inject(MyUIExtension) protected myUiExtension: MyUIExtension;
    doubleClick(target: SModelElement, event: MouseEvent): (Action | Promise<Action>)[] {
        this.myUiExtension.triggerSomeMethod();
        return [];
    }
}

3. MyUIExtension returns an action and MyUIExtension is registered as an action handler for that action.

Whether option 1, 2 or 3 is best depends on the acceptable amount and direction of coupling between those classes, or whether there might be others who need to handle the particular double click (which then would push it for option 3).

Disclaimer: I haven't tested the code, please consider it just as a conceptual example.

[rsoika]

Yes, when I register the MouseListener I see the following error in the browser console:

planner.ts:113 Uncaught (in promise) Error: No matching bindings found for serviceIdentifier: BPMNPropertyMouseListener
    at _validateActiveBindingCount (planner.ts:113)
    at _getActiveBindings (planner.ts:91)
    at _createSubRequests (planner.ts:149)
    at Object.plan (planner.ts:243)
    at container.ts:367
    at Container.__webpack_modules__.../node_modules/inversify/lib/container/container.js.Container._get (container.ts:354)
    at Container.__webpack_modules__.../node_modules/inversify/lib/container/container.js.Container.get (container.ts:246)
    at Binding.dynamicValue (binding_to_syntax.ts:88)
    at resolver.ts:87
    at invokeFactory (resolver.ts:16)

When I use

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

instead of toService, I don't see the errors and the listener is working. But my extension is then not initialized correctly when opening the editor the first time (very strange). But from that point on if I open additional editors all is working.

[planger]

Ah, now I see it. The registration of the mouse listener is wrong. It should be:

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

This is because toService can only be used if you previously already added a registration, e.g. via

bind(BPMNPropertyMouseListener).toSelf();

[rsoika]

ok, using the different binding makes the MouseListener working as expected. But what could be the reason that the method initializeContents in my UIExtension is no longer working when I open an editor the frist time, but works if I open a second editor.

  protected override initializeContents(_containerElement: HTMLElement): void {
	console.log('...running initializeContents');
        const headerCompartment = document.createElement('div');
        headerCompartment.classList.add('bpmn-property-header');
        ....
        this.containerElement.appendChild(headerCompartment);
    }

Is it possible that because the BPMNPropertyPanel is now injected into the MouseListener to early? That would mean that I should choose variant 3 and sending an action from my MouseListener that can be consumed by my UIExtension?

Full Example Code

[planger]

Hm, not sure, sorry... it looks right on a first sight. I'd recommend to debug in the superclass AbstractUIExtension where initializeContents is supposed to be called, going further and further up along the suspected call chain.

Yeah, option three is just an additional layer in between. So it should probably not be a lot of work to try it out.

[rsoika]

Hi @planger - this is very strange. I have now implemented a custom action and I extended my UIExtension with the IActionHandler to handle my custom action - which is all working correctly (double click event is send as a custom action from my MouseListener to my UIExtension).
But now again I have the situation that my property panel is not initialized the first time I open the editor. So the result is absolutely identically to the variant 2 where I injected my UIExtension into the Custom Mouse Handler.

I have no errors during the first initialization and all the code flow seems - as far as I can see - absolutely the same when opening the first editor as when opening a second editor.

I guess the problem is my general Setup of my UIExtension. Maybe you can have a short look into the code :
There must be something in the way I call/overwrite the methods postConstruct(), initializeContents or onBeforeShow

See: https://github.com/imixs/open-bpmn/blob/b521485703f99a793f7674549a3602972dc52b2e/open-bpmn.glsp-client/open-bpmn-properties/src/bpmn-property-panel.tsx#L59

In my early first implementation I also run into this kind of problem - see the discussion with @tortmayr here: #578
Even then, the problem was that I called a configureActionHandler in index.ts. See: https://github.com/imixs/open-bpmn/blob/b521485703f99a793f7674549a3602972dc52b2e/open-bpmn.glsp-client/open-bpmn-properties/src/index.ts#L31

More Background:
To make the problem more clear: during the method initializeContents I add a new div tag (my panel) to the diagram pane. My property panel is very similar to the Tool Palette.

    protected override initializeContents(_containerElement: HTMLElement): void {
        const headerCompartment = document.createElement('div');
        headerCompartment.classList.add('bpmn-property-header');
        headerCompartment.append(this.createHeaderTitle());
        headerCompartment.appendChild(this.createHeaderTools());
        this.containerElement.appendChild(headerCompartment);
        .....
    }

As I can observe form the browser my DIV tag never appears in the diagram pane when I open the editor the first time (with the configureActionHandler stuff).
When I open a second Editor the DIV tag appears and everything is fine.

I also observed the same effect with the Tool Palette when I have some break points in my server code of my ModelFactory (to debug something). In such a szenario also the Tool Pallette never appears. I ignored this so far as it seems to me being a problem of the long running method of the ModelFactory during debugging.

But now I have a simmilar problem with my property panel. It looks like a race condition when doing more things in parallel like registering a second action handler...?

I am not sure if this is relevant, but in the browser cosnole I also often see messages like this one:

connection-status-service.ts:143 [Violation] 'setTimeout' handler took 73ms