Hi Team,
As I am new to GOJS and I have added below layout code in my file and gives me output like (screen 1), but I want to show the output as shown in screen 2. Please help me, how do I change the alignment to show as (Screen 2).
Layout code
diagram.layout = MAKE(go.TreeLayout,
{
treeStyle: go.TreeLayout.StyleRootOnly,
alignment: go.TreeLayout.AlignmentEnd,
layerSpacing: 200
});
Below is the linkTemplate code
diagram.linkTemplate =
MAKE(go.Link,
{
routing: go.Link.Orthogonal,
curve: go.Link.JumpOver,
corner: 14,
toShortLength:2,
toSpot: new go.Spot(0, 0.5, 0, -20.75), fromSpot: new go.Spot(1, 0.5, 0, -20.75),
fromEndSegmentLength: 20, toEndSegmentLength: 20,
selectable: false, //--> Change this to true when we need to implement Selection Implementation
reshapable: false,
// If a node from the Palette is dragged over this node, its outline will turn dark gray
mouseDragEnter: function (e, link) {
//var newnode = diagram.selection.first();
//if (link.data.category === "Merge")
// return;
//if (!(link.fromNode.category === "end" || (link.toNode.category === "end" && link.toNode.findLinksOutOf().count > 0))) {
// var nextLink = link.toNode.findLinksOutOf().first();
// if (nextLink.data.category !== "Merge")
try{
link.isHighlighted = true;
if (link.fromNode.category === "end") {
link.fromNode.findLinksInto().first().isHighlighted = true;
}
if (link.toNode.category === "end" && link.toNode.findLinksOutOf().count > 0) {
link.toNode.findLinksOutOf().first().isHighlighted = true;
}
if (link.fromNode.category === "dummy" && link.fromNode.findLinksInto().count > 0) {
var prevLink=link.fromNode.findLinksInto().first();
// if (prevLink.data.category!=="Merge")
prevLink.isHighlighted = true;
}
if (link.toNode.category === "dummy" && link.toNode.findLinksOutOf().count > 0) {
//var nextLink = link.toNode.findLinksOutOf().first();
// if (nextLink.data.category !== "Merge")
link.toNode.findLinksOutOf().first().isHighlighted = true;
}
} catch (err) {
revertToPrevState = true;
console.log(err);
}
},
mouseDragLeave: function (e, link) {
try{
link.isHighlighted = false;
if (link.fromNode.category === "end") {
link.fromNode.findLinksInto().first().isHighlighted = false;
}
if (link.toNode.category === "end" && link.toNode.findLinksOutOf().count > 0) {
link.toNode.findLinksOutOf().first().isHighlighted = false;
}
if (link.fromNode.category === "dummy" && link.fromNode.findLinksInto().count > 0) {
link.fromNode.findLinksInto().first().isHighlighted = false;
}
if (link.toNode.category === "dummy" && link.toNode.findLinksOutOf().count > 0) {
link.toNode.findLinksOutOf().first().isHighlighted = false;
}
} catch (err) {
revertToPrevState = true;
console.log(err);
}
},
// if a node from the Palette is dropped on a link, the link is replaced by links to and from the new node
mouseDrop: dropOntoLink,
mouseEnter: LinkMouseEnter,
mouseLeave: LinkMouseLeave
},
new go.Binding("fromSpot", "fromSpot"),
new go.Binding("toSpot", "toSpot"),
new go.Binding("zOrder", "isHighlighted", function (h) { return h ? 10 : 0; }).ofObject(),
MAKE(go.Shape, shapeStyle()),
MAKE(go.Shape, arrowStyle()),
MAKE(go.TextBlock, // To show Branch name
{
name:"branchName",
textAlign: "start",
segmentIndex: -1,
segmentOffset: new go.Point(-20, -15),
segmentOrientation: go.Link.OrientUpright,
font: "bold 9px sans-serif",
stroke: "transparent",
text: ""
},
new go.Binding("stroke", "isHighlighted", function (h) { return h ? "rgb(144,144,144)" : "rgb(211,211,211)"; }).ofObject())
//new go.Binding("text", "branchName"))
);
screen 1
screen 2
Thanks & Regards,
Dharmesh CB