Hide node element on GLSP editor on click event

[Abhay0294]

Hi,

My requirement is as follows:

1. There will be one button on the GLSP editor(ex: Hide button).
2. On the click of that button the selected node element should get hidden.[Requirement]

Is there any way how can I achieve this ?

[martin-fleck-at]

Hi @Abhay0294,

1. There are several ways you could add a button to the GLSP editor, depending on where you would like to trigger the action
   i. You could add a button to the tool palette which triggers an action for all selected elements. You can retrieve the selected elements through the editor context.
   ii. If you use the Theia integration, you could use a context menu entry for Show/Hide, similar to how it is done for deletion in the workflow example.
   iii. You can overlay the diagram with a custom HTML element that is rendered as a UI Extension.
   iv. Any mouse tool interaction or anything else you can think of ;-)

2. If you only want to hide the element from the user (without any involvement of the server), the easiest way is probably to trigger a ModifyCSSFeedbackAction for the selected elements and apply or remove a custom CSS class on all selected elements. The CSS class should then properly hide the element, e.g.: .invisible { fill-opacity: 0.0; opacity: 0.0; visibility: hidden; } or something like that. If the server needs to know about it, you could create a custom action that has all necessary information.

[martin-fleck-at]

@Abhay0294 Simply form the code I do not see what could be the issue unfortunately. The general idea is that when you register something as feedback, it will be re-applied even if the model updates (e.g., after ending the drag). When debugging, can you see whether the FeedbackActionDispatcher has the correct feedback registered and calls the ModifyCssFeedbackCommand again after the update?

[Abhay0294]

Hello @martin-fleck-at , thanks for your response.
I have tried what you suggested and concluding as below:

1. While dragging or after dragging none of the code line gets hit in css-feedback.ts file during debugging.
2. After dragging completed invisible nodes again appears.

Requesting you to please look into below reported bug, I think it is sprotty related functionality which resets while dragging/panning.
https://github.com/eclipse-glsp/glsp/discussions/701

[martin-fleck-at]

@Abhay0294 I am not sure that the bug is related but it seems that the bug in Sprotty was already fixed: eclipse-sprotty/sprotty#299. So as soon as there is another Sprotty release we can upgrade GLSP as well to see if that resolves your issue.

[Abhay0294]

Yes @martin-fleck-at , waiting for that release of sprotty.

[martin-fleck-at]

Please note that there is also a PR open on GLSP side for this: eclipse-glsp/glsp-client#191