How to see the edge route before creating an edge

[rileydanejohnston]

Hello,

I want to be able to see the edge route before an edge is created (see video). How can I add this feature to my edges? Here's an example from the glsp-vscode-integration project:

edge-route.mov

[planger]

Hi Riley,

this is done via a DrawFeedbackEdgeAction, which is triggered from the mouse listener installed by the create edge tool. The actual implementation of the effect (i.e. adding the actual edge and moving it along with the mouse) is implemented in src/features/tool-feedback/creation-tool-feedback.ts.

In general, the architecture is as follows:

1. an edit tool is becoming active and installs a mouse listener
2. the mouse listener now reacts to UI events and triggers actions
3. to show feedback it sends dedicated feedback actions
4. feedback actions modify or add to the client-side SModel to show an effect
5. it typically uses the feedback action dispatcher to ensure the effect is reapplied also after a model update
6. once the feedback is not needed anymore, the feedback emitting listeners uninstall the feedback (remove CSS classes or SModel elements they may have added) to restore the state before the feedback.

You can customize and create specific feedback effects by installing your custom tools, which use custom mouse listeners.
Of course you can also opt to just reuse and subclass the one linked above.

We are aware that it is not really straightforward to work with feedback. Therefore, we have a #102 to find an easier way for implementing feedback. But this is just on the roadmap for 2.0.

I hope this helps!