Hello, I would like to create a custom template for group + node type on my diagram.
It’s like a hierarchy view to manage for example a Database > Database Table > Table field 1 / Table field 2 etc.
Below, the template I want to create.
I can have link between :
- Group to inner node
- Group to other group
- node to other node
- Node to group
I nearly succeed in doing the template but I have strange behaviour sometimes with links and padding between groups or nodes.
Below I copy/paste the code for nodes and links.
//Template for node
diagram.nodeTemplate =
$(go.Node, "Auto", {
movable: false,
copyable: false,
avoidable: true,
click: function (e, node) {
if (node instanceof go.Node) {
highlightLinks(node);
}
}
},
$(go.Panel, go.Part.Table, {stretch: go.GraphObject.Fill},
$(go.Panel, go.Panel.TableRow, {alignment: go.Spot.Right},
$(go.Picture, {
column: 1,
margin: new go.Margin(2, 2, 2, 15),
width: 16,
height: 16
}, new go.Binding("source", "source")),
$(go.TextBlock,
{column: 2, margin: 5, editable: false,},
new go.Binding('text').makeTwoWay()
)
)
)
)
//Template for group
diagram.groupTemplate =
$(go.Group, "Auto",
{
layout: $(go.TreeLayout, {
angle: 90,
alignment: go.TreeLayout.AlignmentStart,
layerSpacing: 10,
nodeSpacing: 20,
portSpot: go.Spot.Left,
childPortSpot: go.Spot.Left,
sorting:go.TreeLayout.SortingAscending,
comparer: function(a:go.TreeVertex,b:go.TreeVertex){return nodeSorting(a,b)}
}),
avoidable: false,
isShadowed: false,
shadowOffset: new go.Point(3, 3),
shadowColor: "#E2E2E2",
movable: false,
click: function (e, node) {
if (node instanceof go.Node) {
highlightLinks(node);
}
}
}, new go.Binding("isShadowed", "root"),
new go.Binding("movable", "root"),
$(go.Shape, "RoundedRectangle", {
strokeWidth: 0,
stroke: "#E2E2E2",
fill: "white",
stretch: go.GraphObject.Horizontal
},
new go.Binding("strokeWidth", "root", (v) => {
return v ? 1 : 0
})
),
$(go.Panel, go.Panel.Vertical,
$(go.Panel, go.Panel.Horizontal, {
alignment: go.Spot.Left,
defaultStretch: go.GraphObject.Horizontal,
portId: ""
},
new go.Binding("alignment", "root", (v) => {
return v ? go.Spot.Center : go.Spot.Left
}),
$(go.Picture, {margin: 3, width: 16, height: 16}, new go.Binding("source", "source")),
$(go.TextBlock, {margin: 3, editable: false}, new go.Binding('text').makeTwoWay()),
$("SubGraphExpanderButton", {
margin: 3,
visible: false
}, new go.Binding("visible", "loadMore", (v) => {
return !v
})),
$("Button", {
visible: true, margin: 3, click: function (e, obj) {
diagram.select(obj.part)
}
},
$(go.Shape, "PlusLine", {
stroke: '#424242',
strokeWidth: 2,
desiredSize: new go.Size(8, 8)
}), new go.Binding("visible", "loadMore")
),
$("Button", {
visible: true, margin: 3, click: function (e, obj) {
if (obj.part) {
selfComponent.props.onClickMoreButton(obj.part.data.key);
}
}
},
$(go.Picture, {
source: "/img/random.svg",
desiredSize: new go.Size(13, 13)
}, new go.Binding("source", "fullLineageDisplayed", (v) => {
return v ? "/img/randomHighlight.svg" : "/img/random.svg"
}),
{toolTip: $("ToolTip", $(go.TextBlock, {margin: 4}, "Get all links"))})
)
),
$(go.Shape, "LineH", {
visible: true,
stroke: TECHNOLOGY_COLOR,
height: 10,
stretch: go.GraphObject.Horizontal
},
new go.Binding("visible", "root")),
$(go.Placeholder,{padding:new go.Margin(0,0,0,10)})
)
)
Can you have a look at my code and tell me if I’m doing something wrong… I don’t understand how to improve the template. Maybe I can change with a table or something else.
Thank you !