简单边框
许多简单的节点只是由一个的面板类型的面板,自动带有围绕TextBlock的Shape。
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "Rectangle",
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key"))
);
diagram.model.nodeDataArray = [
{ key: "Alpha", color: "lightblue" }
];
形状节点
内容周围的Shape不必为矩形。周围/背景对象不必是Shape。
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape,
new go.Binding("figure", "fig"),
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key"))
);
diagram.model.nodeDataArray = [
{ key: "Alpha", color: "lightblue", fig: "RoundedRectangle" },
{ key: "Beta", color: "lightblue", fig: "Ellipse" },
{ key: "Gamma", color: "lightblue", fig: "Hexagon" },
{ key: "Delta", color: "lightblue", fig: "FramedRectangle" },
{ key: "Epsilon", color: "lightblue", fig: "Cloud" },
{ key: "Zeta", color: "lightblue", fig: "Procedure" }
];
复杂内容
自动面板的内容不必限于单个TextBlock-您可以具有任意复杂的对象面板。
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape,
{ fill: $(go.Brush, "Linear", { 0: "white", 1: "lightblue" }),
stroke: "darkblue", strokeWidth: 2 }),
$(go.Panel, "Table",
{ defaultAlignment: go.Spot.Left, margin: 4 },
$(go.RowColumnDefinition, { column: 1, width: 4 }),
$(go.TextBlock,
{ row: 0, column: 0, columnSpan: 3, alignment: go.Spot.Center },
{ font: "bold 12pt sans-serif" },
new go.Binding("text", "key")),
$(go.TextBlock, "First: ",
{ row: 1, column: 0 }),
$(go.TextBlock,
{ row: 1, column: 2 },
new go.Binding("text", "prop1")),
$(go.TextBlock, "Second: ",
{ row: 2, column: 0 }),
$(go.TextBlock,
{ row: 2, column: 2 },
new go.Binding("text", "prop2"))
)
);
diagram.model.nodeDataArray = [
{ key: "Alpha", prop1: "value of 'prop1'", prop2: "the other property" }
];
固定大小的节点
如果希望将Panel(因此Node,因为Node继承自Part,而Part继承自Panel)的大小固定,则在该Panel上设置GraphObject.desiredSize。(等效地,您可以设置GraphObject.width和GraphObject.height。)这可能会导致内容裁剪过大,或者如果内容小于“自动”提供的可用区域,则可能会导致多余的空间面板。
diagram.nodeTemplate =
$(go.Node, "Auto",
{ desiredSize: new go.Size(100, 50) }, // on Panel
$(go.Shape,
new go.Binding("figure", "fig"),
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key"))
);
diagram.model.nodeDataArray = [
{ key: "Alpha", color: "lightblue", fig: "RoundedRectangle" },
{ key: "Beta", color: "lightblue", fig: "Ellipse" },
{ key: "Gamma", color: "lightblue", fig: "Hexagon" },
{ key: "Delta", color: "lightblue", fig: "FramedRectangle" },
{ key: "Epsilon,Epsilon,Epsilon", color: "lightblue", fig: "Cloud" },
{ key: "Z", color: "lightblue", fig: "Procedure" }
];