Hi can you help to fix alignment issue its custom made tree layout and lines is not connecting each other. you can see expected layout at rightside in blue border.
here my tree node template
myDiagram.nodeTemplate =
$(TreeNode, "Auto",
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{
movable: false
},
{ selectionAdorned: false, // don't bother with any selection adornment
selectionChanged: onSelectionChanged },
$(go.Shape, "RoundedRectangle", { name: "mainshape",width: 265, height: 25, strokeWidth: 0, fill: null,strokeDashArray:[0,0]})
,
{ contextMenu: $(go.Adornment) },
$(go.Panel, "Horizontal",
{
name: "indentPanel",
alignment: go.Spot.Left, // This spot gets modified by the layout to be more indented
alignmentFocus: go.Spot.Left
},
$("TreeExpanderButton", // support expanding/collapsing subtrees
{
width: 14,
height: 14,
"ButtonIcon.stroke": "lightgray",
"ButtonIcon.strokeWidth": 1,
"ButtonBorder.fill": "white",
"ButtonBorder.figure": "Rectangle",
margin:6
}
),
$(go.Panel, "Horizontal", {
position: new go.Point(18, 0)
},
$(go.Shape, "LineV",
{ stroke: "lightgray", width: 1,
height: 25
},
new go.Binding('visible', 'isTreeLeaf', function (leaf) {
return leaf
}).ofObject()
),
$(go.Shape, "LineH", {
width: 13,
height: 22,
stroke: "lightgray"
}
),
$(go.TextBlock,
{margin: 2,stroke: "#333333", name: "MAINTXT",font: "13px FrutigerNext_LT_Regular"},
new go.Binding("isUnderline", "underline"),
new go.Binding("font", "bold"),
//new go.Binding("font", "bold"),
new go.Binding('margin', 'isTreeLeaf', function (leaf) {
return leaf ? leafMargin : 5;
}).ofObject(),
new go.Binding("font", "font"),
new go.Binding("text"))
),
// Key icon after tree node text
$(go.Picture,
{margin: 2},
new go.Binding("source", "keyicon")),
// Code icon after tree node text along with static tooltip
$(go.Picture,
{margin: 2},
{ contextMenu: $(go.Adornment) },
{
toolTip: // define a tooltip for each node that displays the color as text
$(go.Adornment, "Auto",
$(go.Shape, { fill: "white", stroke: "gray", strokeWidth: 3 }),
$(go.Panel, "Table",
{ padding: 4
},
// Set defaults for all rows and columns:
{ defaultRowSeparatorStroke: "gray",
defaultColumnSeparatorStroke: "gray" },
$(go.Panel, "TableRow", { row: 0 },
$(go.TextBlock, "Properties",
{ column: 0, columnSpan: 2, stretch: go.GraphObject.Horizontal, font: "bold 10pt FrutigerNext_LT_Regular", margin: 1 })
),
$(go.RowColumnDefinition,
{ row: 0, separatorStrokeWidth: 0, separatorStroke: "black" }),
$(go.RowColumnDefinition,
{ column: 1, separatorStrokeWidth: 0, separatorStroke: "black" }),
$(go.Panel, "TableRow", { row: 1 },
$(go.TextBlock, "Type", { column: 1, margin: 2 }),
$(go.TextBlock, "String", { column: 2, margin: 2 })
),
$(go.Panel, "TableRow", { row: 2 },
$(go.TextBlock, "Size of String", { column: 1, margin: 2 }),
$(go.TextBlock, "55", { column: 2, margin: 2 })
),
$(go.Panel, "TableRow", { row: 3 },
$(go.TextBlock, "Primary Key", { column: 1, margin: 2 }),
$(go.TextBlock, "Yes", { column: 2, margin: 2 })
),
$(go.Panel, "TableRow", { row: 4 },
$(go.TextBlock, "Not Null", { column: 1, margin: 2 }),
$(go.TextBlock, "No", { column: 2, margin: 2 })
),
$(go.Panel, "TableRow", { row: 5 },
$(go.TextBlock, "Unique", { column: 1, margin: 2 }),
$(go.TextBlock, "No", { column: 2, margin: 2 })
),
$(go.Panel, "TableRow", { row: 6 },
$(go.TextBlock, "Foreign Key", { column: 1, margin: 2 }),
$(go.TextBlock, "No", { column: 2, margin: 2 })
)
))
},
new go.Binding("source", "codeicon"))
),
// The arrow that acts as a port on either the left or ride side
$(go.Shape,
{
alignment: go.Spot.Right,
name: 'arrow',
figure: "TriangleRight",
//margin: 6,
width: 7.5, height: 7.5,
fill: "white",
stroke: "lightgray",
strokeWidth: 1, portId: "Out",
fromLinkable: true,
toLinkable: true,
mouseEnter: function(e, obj) {
obj.part.findObject("MAINTXT").isUnderline = true;
obj.part.findObject("arrow").fill = "#00a3d9";
obj.part.findObject("arrow").stroke = "#00a3d9";
obj.part.findObject("MAINTXT").stroke = "#00a3d9"
//obj.part.findObject("MAINTXT").font = "bold 11px sans-serif"
},
mouseLeave: function(e, obj) {
obj.part.findObject("MAINTXT").isUnderline = false;
//obj.part.findObject("MAINTXT").font = ""
obj.part.findObject("arrow").fill = "white";
obj.part.findObject("arrow").stroke = "lightgray";
obj.part.findObject("MAINTXT").stroke = "#494949"
}
},
new go.Binding("alignment", "containingGroup", function (group) {
if (group !== null && group.data.side === "left") return go.Spot.Left;
return go.Spot.Right;
}).ofObject(),
new go.Binding("alignmentFocus", "containingGroup", function (group) {
if (group !== null && group.data.side === "left") return go.Spot.Right;
return go.Spot.Left;
}).ofObject(),
new go.Binding("portId", "containingGroup", function (group) {
if (group !== null && group.data.side === "left") return "In";
return "Out";
}).ofObject(),
new go.Binding("fromLinkable", "containingGroup", function (group) {
return !(group !== null && group.data.side === "left");
}).ofObject(),
new go.Binding("toLinkable", "containingGroup", function (group) {
return (group !== null && group.data.side === "left");
}).ofObject()
))