function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center, // for v1.*
layout: $(go.TreeLayout)
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape,
{ fill: "white", portId: "" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: new go.Margin(8, 24) },
new go.Binding("text")),
$("Button", { name: "BUTTON", alignment: go.Spot.Left },
$(go.Shape, "Circle", { width: 10, fill: "red", strokeWidth: 0 }),
{
click: function(e, button) {
var node = button.part;
var root = node.findTreeRoot();
if (node !== root) {
var vis = root.visible;
e.diagram.commit(function(diag) {
root.findTreeParts().each(function(part) {
if (part instanceof go.Node && part !== node && !part.isInTreeOf(node)) {
part.visible = !vis;
}
});
});
}
}
}),
$("TreeExpanderButton", { alignment: go.Spot.Right }),
{
linkConnected: function(node) { node.findObject("BUTTON").visible = node.findLinksInto().count > 0; },
linkDisconnected: function(node) { node.findObject("BUTTON").visible = node.findLinksInto().count > 0; },
}
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen" },
{ key: 4, text: "Delta", color: "pink" },
{ key: 0, text: "Root" }
],
[
{ from: 0, to: 1 },
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 3, to: 4 }
]);
}
produces:
Clicking on a red circle button, such as on “Gamma” results in:
