LayeredDigraphLayout creating different Routing and link style in the diagram

[dreamweiver]

Hi Team,

I have used LayeredDigraphLayout to arrange the nodes horizontally and vertically, although everything is working fine, the link style seems to be different from the one what I have defined originally for the links in my diagram.

here is my link template

     { 
        selectable: false, 
        selectionAdornmentTemplate: linkSelectionAdornmentTemplate, 
        routing: go.Link.Normal,
        curve: go.Link.Bezier
     }

result of above link template is below

the same diagram when i align it horizontally, i get below result

overall I like the link style resulted from horizontal arrangement of nodes (using LayeredDigraphLayout), but I am not able to configure my default link template as such, so could you please help me with this.

below is the config of LayeredDigraphLayout:

        var $ = go.GraphObject.make;
        var defLayout = myDiagram.layout;

		myDiagram.startTransaction("Layout Change");
		myDiagram.layout = $(go.LayeredDigraphLayout,
					{
						isInitial : false,
						isOngoing : false,
						layeringOption : go.LayeredDigraphLayout.LayerLongestPathSource,
						layerSpacing : 100,
						columnSpacing : 50,
						setsPortSpots : false,
						angle : _angle
					});

		myDiagram.layoutDiagram(true);
		myDiagram.layout = defLayout; // Assign the new layout to the existing diagram
		myDiagram.commitTransaction("Layout Change");

[walter]

The simple answer is that you just need to set fromSpot to go.Spot.Right and toSpot to go.Spot.Left, either on the Link template or on the port in the Node template. But…

You probably do not want to set LayeredDigraphLayout.setsPortSpots to false, since that prevents it from setting Link.fromSpot and Link.toSpot to those values.

I don’t understand why you are setting Diagram.layout twice. Your setting Layout.isInitial and Layout.isOngoing to false should be sufficient to ensure that the layout will not be performed automatically – it will only be performed by calling some method explicitly, such as Diagram.layoutDiagram.

[dreamweiver]

Thanks walter, for your quick reply.

By setting fromSpot to go.Spot.Right and toSpot to go.Spot.Left , would it change the spot direction appropriately, when aligned vertically ?

Update: I tried your solution, the routing and link style has gone bad(refer below image) & also it doesn’t work when aligning the nodes vertically.

diagram generated with above solution:

[walter]

I didn’t know about your wanting to change the direction of the layout. In that case it makes sense to have the layout determine each link’s Link.fromSpot and Link.toSpot, or to not set any fromSpot or toSpot at all by setting LayeredDigraphLayout.setsPortSpots to false.

I still don’t know what link appearance that you want. If you want the links to be curved as in your first screenshot, then I suggest you never set fromSpot or toSpot and that you also prevent the layout from doing so, by setting LayeredDigraphLayout.setsPortSpots to false.

[dreamweiver]

Hi Walter,

Yes, in my app i have provided options to arrange the nodes vertically and horizontally. like you said it doesnt make sense to set the Link.fromSpot and Link.toSpot for links.

I would want the linkages of the diagram to be as below (see link between step4 and step3 )

but the problem is that, this happens only when i call DigraphLayout(while arranging nodes horizontally and vertically). by default the linkages are styled as below, which is not so good looking.

I hope i am not confusing you.

thanks in advance

[walter]

I think you will get what you are asking for by having a link template like:

    myDiagram.linkTemplate =
      $(go.Link,
        { curve: go.Link.Bezier, toShortLength: 1,
          fromEndSegmentLength: 30, toEndSegmentLength: 30 },
        $(go.Shape, { strokeWidth: 2, stroke: "#333" }),
        $(go.Shape, { toArrow: "OpenTriangle" }));

I have modified the samples/ldLayout.html sample to use this link template and a slightly modified node template, to produce:

Change the direction to 90:

[dreamweiver]

As always you have done it, Thanks a lot walter :)