ContextMenu Flicker

[Kabe]

Hi there

Recently you helped show me how to present a context menu when clicking on a user handle for a node.

I implemented it and although it works, I found a scenario in which there is some flicker.

Please find the stackblitz below that demonstrates the issue, as well as the attached video.

The scenario is this: I use a button to Add a Node to the canvas. I then select the node (through code) right away. Finally I click on the user handle. When the context menu is displayed it disappears for a moment and then comes back.

Please help because it's not a great user experience to see this flickering. Thanks!

https://stackblitz.com/edit/angular-8nww6f-hoet6d?file=src%2Fapp.component.ts

Attachment: flicker_cf9425dd.zip

[Vivisa Ganesan]

Hi,

We will validate and update you with more details on August 7,2024.

Regards,

Vivisa

[Vivisa Ganesan]

Hi,

We have analyzed the sample you shared and found that the user handle tooltip flickering is occurring in the sample. This causes the context menu to flicker when clicking the user handle. We have fixed the user handle flickering issue in version 26.1.42. In the sample you provided, you have upgraded to this version only in the ej2-diagram package, while the ej2-angular-diagram package still holds an older version. Please update the ej2-angular-diagram package to version 26.1.42 to resolve this issue. We have modified and updated the sample. Please refer to that.

Sample:

https://stackblitz.com/edit/angular-8nww6f-xd7xxs?file=package.json,src%2Fapp.component.ts

Regards,

Vivisa

[Kabe]

Hi -

Thanks for the response but the problem still exists in the revised sample that you provided.

Please check the attached vid to see the flicker. Note that I am using Chrome in case that matters.

To recap, I use a button to add a note then attempt to view the context menu by click on a user handle. The first time that the context menu appears it immediately disappears and then comes back again.

Attachment: still_flicker_99fe83d0.zip

[Vivisa Ganesan]

Hi

We able to replicate the issue at our end. We will validate and update you with more details on August 16,2024.

Regards

Vivisa

[Vivisa Ganesan]

Hi,

Upon reviewing your video, it appears that the flickering issue occurs because the diagram needs to be focused before clicking the user handle. The click event for the user handle will only be triggered after the diagram is focused. To avoid the flickering, ensure that the diagram is focused first, and then proceed to click the user handle. Please refer to the video below for a demonstration.

Regards

Vivisa

Attachment: Userhandle_8bfb1c1c.zip

[Kabe]

That's interesting that it is a focus issue. 

The thing is, I can't control my users and the way the interact with the diagram. I therefore need another solution to work around this bug. Can you please ask around and see what approach could be used that guarantees no flicker?

[Vivisa Ganesan]

Hi

 We will validate and update you with more details on August 20,2024

Regards,

Vivisa

[Moulidharan Gopalakrishnan]

Hi,

Upon further analysis, we observed that in your sample, the node is selected while adding at runtime, and then you directly click on the user handle. In this scenario, as mentioned earlier, the diagram does not have focus, which causes the flickering issue. To avoid this, ensure that the diagram has focus before proceeding with any action. You should either click on a node or diagram to attain focus in a diagram. This is the default behavior of our diagram control.


Regards,

Moulidharan

[Kabe]

Is there a way to programmatically focus the diagram or node after adding the node? 

The node is automatically selected using: this.diagram.select([this.diagram.nodes[0]]);

Perhaps this should focus it as well?

I have tried to programmatically focus the node and simulate clicking on the node but neither works. Is there a way to do this programmatically?

[Vivisa Ganesan]

Hi,

We will validate the possibilities to focus the diagram programmatically and update you with more details on August 23,2024.

Regards,

Vivisa

[Vivisa Ganesan]

Hi,

We have validated the possibility of focusing on the diagram programmatically. However, currently, the only available option to focus on the diagram is by clicking on it manually.

Regards,

Vivisa

[Kabe]

Hi 

I do understand what you are saying but I think we could put aside the current behaviour and ask if it really makes sense.

If a node can be selected programmatically with this.diagram.select then I believe it should follow that there should be a way to programmatically focus the diagram too.

In all my previous interactions with support I think 100% of them have ended in a solution or at least a work around. 

There must be something that can be done here?

[Moulidharan Gopalakrishnan]

Hi

We will further validate and update you with more details on August 28,2024

Regards,

Moulidharan

[Moulidharan Gopalakrishnan]

Hi,

We have further analyzed the issue and identified that the context menu flickering occurs when the diagram doesn't have focus during mouse interactions. Since you're using the Syncfusion context menu instead of the diagram's built-in context menu, we've programmatically set the focus to the diagram element on a click event. However, if the user clicks the handle, flickering may still occur. To render the context menu without flickering, please ensure that the diagram has focus before proceeding with any action. This can be done by mouse clicking on a node or anywhere within the diagram. This is the default behavior of our diagram control.

Regards,
Moulidharan

[Kabe]

Is there a way to give the diagram focus without clicking with a mouse? How can it be done programmatically?

In my application there are lots of ways for the user to add nodes to the diagram programmatically (and/or select nodes programatically) but I am having issues because, as you say, the diagram is not focused.

If it is not possible can this feature be added?

[Vivisa Ganesan]

Hi,

We attempted to focus the diagram programmatically but were unable to achieve this. Please refer to the sample we tried. This behavior is inherent to the framework, so we cannot log a feature request for this.

Sample: ContextMenuFlicker (forked) - StackBlitz

Regards,

Vivisa

[Kabe]

Thanks for trying!! I do appreciate it.

I have noticed that if I use onUserHandleMouseUp instead of onUserHandleMouseDown that I don't get the flicker.

The issue with MouseUp is that if the user moves that mouse ever so slightly before releasing the mouse it doesn't fire so it's not a perfect solution. (I've done this several times).

You mentioned that you attempted to focus the diagram programmatically but can't. How about this: Is there a way to CHECK if the diagram has focus or not?

If so I could use MouseUp when the diagram does not have focus and MouseDown otherwise. Or perhaps there is an even better way that does not rely on focus.

[Moulidharan Gopalakrishnan]

Hi Kabe,

We are glad that you found a solution. Also We handle the focus of the diagram exclusively at the source level, where interactions occur internally. As a result, we do not have an option to check whether a component is focused or not.

Regards,
Moulidharan