Horizontal swimlane diagram using angular framework

[sindhu]

Hi Walter,

When we connect nodes between two lanes it is taking unnecessary bends in connectors.
Below is the sample image:

Here you can see the highlighted connection with unnecessary bends(LIC 00200 to FIC006)
I have referred Page Not Found -- Northwoods Software for layout and added linkspacing in SwimLaneLayout function:
function SwimLaneLayout() {
go.LayeredDigraphLayout.call(this);
// settable properties
this.laneProperty = “lane”; // how to get lane value from node data
this.laneNames = []; // lane names, may be sorted using this.laneComparer
this.laneComparer = null;
this.laneSpacing = 0; // in columns
this.linkSpacing = 4;
this.laneWidths = null;
this.lanePos = null;
}
Below is my nodeTemplate and linkTemplate code:
myDiagram.nodeTemplate =
$(go.Node, “Auto”, // the whole node pa
$(go.Shape, “Rectangle”,
{ fill: “white”, stroke: “gray”,width:60,height:40},
new go.Binding(“figure”, “fig”),
{ portId: “”, fromSpot: go.Spot.RightSide, toSpot: go.Spot.LeftSide }
),
$(go.TextBlock, // the text label
new go.Binding(“text”, “key”)),
);

myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{ routing: go.Link.AvoidsNodes, corner: 15},

    $(go.Shape,  // the link shape
      { strokeWidth: 0.5,stroke:"blue" }),
    $(go.Shape,  // the arrowhead
      { toArrow: "Standard", stroke: null },
	  new go.Binding("strokeWidth", "width"),
new go.Binding("strokeDashArray", "dash"))	 
  );

How can I avoid this unnecessary bends in the connectors?

Thanks and Regards,
Sindhu

[walter]

You could try setting isRouting: false on the layout.

[sindhu]

Thanks Walter!!

Below is the sample swimlanelayout I wanted for my project.

I’m getting swimlanelayout graph below. Here Nodes are arranging at the top of the lane. But I wanted it to be arranged in symmetric way like sample swimlanelayout. In the sample swimlanelayout it is properly aligned in the lane. I have referred https://gojs.net/temp/swimlanelayout.html for swim lane layout.

Here is my groupTemplate code:

myDiagram.groupTemplate =

$(go.Group,“Horizontal”,

{

layerName: “Background”, // always behind all regular nodes and links

movable: false, // user cannot move or copy any lanes

copyable: false,

locationObjectName: “PLACEHOLDER”, // this object will be sized and located by SwimLaneLayout

layout: null, // no lane lays out its member nodes

avoidable: false // don’t affect any AvoidsNodes link routes

},

$(go.TextBlock, { font: “bold 12pt sans-serif”, angle: (DIRECTION === 0 || DIRECTION === 180) ? 270 : 0 },

new go.Binding(“text”, “key”)),

$(go.Panel, “Auto”,

$(go.Shape, { fill: “RGB(230,230,230)”, stroke: “white”, strokeWidth: 8}),

$(go.Shape, { name: “PLACEHOLDER”, fill: null, stroke: null, strokeWidth: 0 })

),

);

How can I achieve this?

Thanks,
Sindhu

[walter]

Yes, being able to position the nodes in each layer centered in each lane is still on the list of tasks to do for that layout. That shouldn’t be hard to do, but I just haven’t gotten around to it yet.

[sindhu]

Thanks Walter!!

I’ll try to do it.
It would be really helpful If you have time to do a sample of my requirement and suggest me how can I achieve this.

Thanks,
Sindhu

[walter]

Is the vertical positioning of the nodes within each lane the only problem that you have left? (With respect to the use of SwimLaneLayout, not the rest of your app, of course.)

[sindhu]

Yes. Vertical positioning(Alignment of nodes in each node) of the nodes within each lane is the only problem as of now. we are expecting the layout which looks nearly same(alignment of the nodes in each lane,link spacing,avoid link overlapping) as below:

We are evaluating GoJS for our major project. We can go for further implementation using GoJS If we solve this problem as early as possible(within current week).go/no-go decision will be taken this week.
It would be really helpful If you have time to do a sample or suggest me how can I solve this

Thanks,
Sindhu.

[walter]

OK, I have updated Page Not Found -- Northwoods Software and Page Not Found -- Northwoods Software

I hope to turn this into an extension in the future, at which time I’ll remove this from our temp directory.