Divining the interconnect flow between shapes in a diagram

[Lloyd]

For a given diagram, is there an easy way to walk the diagram and determine, for each shape, what the interconnects are between that shape and any other shape and on what shape nodes?  For the example, in the attached workflow diagram, there are 5 shapes with interconnects as follows:

• Shape A connects TO Shape B
• Shape B connects TO Shape D 
• Shape B connects TO Shape C
• Shape C connects TO Shape A
• Shape D connects TO Shape E

Ideally, I need to be able to divine, for each shape, all interconnects to/from other shapes along with the specific connection node and the direction of flow (based on start cap/end cap).  I have examined the diagram object of a sample workflow and the info I'm looking for appears to all be there but it putting it all together seems to be quite convoluted.  Is there perhaps a working example available that demonstrates some of what I'm attempting to do?

Thanks.

[Vessy]

Hi Lloyd,

The Kendo Diagram widget of RadDiagram has a pretty rich API, allowing you to get reference to almost each collection of the control (like shapes, its connectors and connections). You can examine all available public members of the widget here:
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram

For example, you can use the following snippet as a base for your implementation for traversing through the connectors of all shapes and the connections assigned to them:

function diagramLoad(diagram) {
    var kendoDiagram = diagram.get_kendoWidget();
    kendoDiagram.shapes.forEach(
        function (s) {
            var id = s.options.id;
            console.log(id + " has connections:");
            s.connectors.forEach(function (c) {
                if (c.connections.length) {
                    c.connections.forEach(function (conn) {
                        console.log("From: " + conn.from.shape.id);
                        console.log("To: " + conn.to.shape.id);
                        console.log("")
                    })
                }
            });
            console.log("----------------------------------");
        })
}

Regards,
Vessy
Progress Telerik

[Lloyd]

Thanks Vessy.  I was making things much harder than I needed to - your example was very straight-forward.

At the risk of asking a question that may be considered "off thread", is there a way to designate a connection node as being "from only" or "to only" (i.e. connections can only go one direction)?  For my workflow decision block shape, I have graphically labeled one node as being the task's input (inbound only), another being "Approved" (outbound only) and another being "Rejected" (outbound only).

Thanks.

[Vessy]

Hi Lloyd,

I am afraid that the diagram does not have such built-in funtionality to restrict/set the orientation of the connections. The optimal solution I can suggest you to set the endCap of the connectins and determine their orientation depending on the given value:
https://docs.telerik.com/devtools/aspnet-ajax/controls/diagram/structure/connection#endcap

Regards,
Vessy
Progress Telerik

[Lauri]

Hi...I'm drawing the power plan. I have a big shape (principal). Inside a this shape I need to draw other shapes more  small. For evry shape i want to have different spacing. (shape to shape). Initially (for principal shape) in the parameters of shape I set (shape/rect) the
spacing. In this case all shapes had same clearance. But I want to management the clearances for every shape. How can I get this? Do I have to use the constraint manager?

[Vessy]

Hi Lauri,

The Diagram allows to control the spacing between the shapes by configuring the HorizontalSeparation and VerticalSeparation properties under LayoutSettings, but this applies to all shapes, not only specific ones:

<telerik:RadDiagram ID="theDiagram" runat="server">
    <LayoutSettings Enabled="true" VerticalSeparation="100" HorizontalSeparation="200"></LayoutSettings>
    ...
</telerik:RadDiagram>

The only way to position each shape on a specific place at the moment is to set its X and Y coordinates (making the shape not draggable, though):

<telerik:DiagramShape Id="s2" Width="150" Height="100" X="20" Y="200">
    <ContentSettings Text="Shape B" Align="top right" />
    <HoverSettings>
        <FillSettings Color="4682B4" />
    </HoverSettings>
</telerik:DiagramShape>

Regards,
Vessy
Progress Telerik