[Solved] How to show connector labels in diagram shape?

[Adrian]

I need to replicate an existing flow application to Angular. The flowchart consist on simple blocks with a single input and multiple outputs (depending on their type). Every block displays the port names, its type (name and icon) and its step name. Please see the attached image.

I'm trying to do this using Kendo diagrams based on the following guides:

https://www.telerik.com/kendo-angular-ui/components/diagrams/connections#defining-shape-connector-points

https://www.telerik.com/kendo-angular-ui/components/diagrams/shapes#changing-the-shape-visuals

I think the header/icon/footer schema can be replicated using the visual function of the ShapeDefaults option of the DiagramComponent (kendo-diagram). However, I don't find a way to do the same with the block ports (Connectors). I would like to:

- Show the port name insede the block

- Make the the ports always visible (not only when focused)

- Style the ports according to their type (input/output)

Is there an embeded way to do this?

Thank you in advance for your help.

 

[Martin Bechev]

Hi Adrian,

I am not sure that I understand the description and the image correctly.

Which of the elements are the port name, type, and step name? How does your current flow look? This way, we can gain better context and suggest more valuable assistance.

I tried to replicate the image you attached with the Kendo Angular Diagram, and here is the end result:

https://stackblitz.com/edit/angular-qnmebrsa

Please check out the demo and let me know if I am missing something or if any follow-up questions arise.

Regards,
Martin Bechev
Progress Telerik

[Adrian]

Thank you a lot, Martin. I'm sorry if I was not clear enough, but this is exactly what I needed.
I managed to display the models (without styling), but I got another problem. Maybe you can help me with that too. I used the layout parameter of the DiagramComponent to auto distribute the shapes (type: 'tree', subtype: 'right'), but the 'cascading' connections some times overlap the shapes or get in/out the shape in the "opposite" direction (see the attached picture). I made some progress on fixing that by modifyng the "locks" and "definers" of the problematic Connection items. Is there a better way to do this?