Good morning dear developers. I wanna create diagram with any kind of nodeTemplate.
I use next code to create node the first nodeTemplate, but how to create nodeTemplate for the second type of node?
the first nodeTemplate:
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ doubleClick: nodeDoubleClick },
{ // handle dragging a Node onto a Node to (maybe) change the reporting relationship
mouseDragEnter: function(e, node, prev) {
var diagram = node.diagram;
var selnode = diagram.selection.first();
if (!mayWorkFor(selnode, node)) return;
var shape = node.findObject("SHAPE");
if (shape) {
shape._prevFill = shape.fill; // remember the original brush
shape.fill = "darkred";
}
},
mouseDragLeave: function(e, node, next) {
var shape = node.findObject("SHAPE");
if (shape && shape._prevFill) {
shape.fill = shape._prevFill; // restore the original brush
}
},
mouseDrop: function(e, node) {
var diagram = node.diagram;
var selnode = diagram.selection.first(); // assume just one Node in selection
if (mayWorkFor(selnode, node)) {
// find any existing link into the selected node
var link = selnode.findTreeParentLink();
if (link !== null) { // reconnect any existing link
link.fromNode = node;
} else { // else create a new link
diagram.toolManager.linkingTool.insertLink(node, node.port, selnode, selnode.port);
}
}
}
},
// for sorting, have the Node.text be the data.name
new go.Binding("text", "name"),
// bind the Part.layerName to control the Node's layer depending on whether it isSelected
new go.Binding("layerName", "isSelected", function(sel) { return sel ? "Foreground" : ""; }).ofObject(),
// define the node's outer shape
$(go.Shape, "Rectangle",
{
name: "SHAPE", fill: "#333333", stroke: 'white', strokeWidth: 3.5,
// set the port properties:
portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer"
}),
$(go.Panel, "Horizontal",
$(go.Picture,
{
name: "Picture",
desiredSize: new go.Size(70, 70),
margin: 1.5,
},
new go.Binding("source", "key", findHeadShot)),
// define the panel where the text will appear
$(go.Panel, "Table",
{
minSize: new go.Size(130, NaN),
maxSize: new go.Size(150, NaN),
margin: new go.Margin(6, 10, 0, 6),
defaultAlignment: go.Spot.Left
},
$(go.RowColumnDefinition, { column: 2, width: 4 }),
$(go.TextBlock, textStyle(), // the name
{
row: 0, column: 0, columnSpan: 5,
font: "12pt Segoe UI,sans-serif",
editable: true, isMultiline: false,
minSize: new go.Size(10, 16)
},
new go.Binding("text", "name").makeTwoWay()),
$(go.TextBlock, "Title: ", textStyle(),
{ row: 1, column: 0 }),
$(go.TextBlock, textStyle(),
{
row: 1, column: 1, columnSpan: 4,
editable: true, isMultiline: false,
minSize: new go.Size(10, 14),
margin: new go.Margin(0, 0, 0, 3)
},
new go.Binding("text", "title").makeTwoWay()),
$(go.TextBlock, textStyle(),
{ row: 2, column: 0 },
new go.Binding("text", "key", function(v) { return "ID: " + v; })),
$(go.TextBlock, textStyle(),
{ name: "boss", row: 2, column: 3, }, // we include a name so we can access this TextBlock when deleting Nodes/Links
new go.Binding("text", "parent", function(v) { return "Boss: " + v; })),
$(go.TextBlock, textStyle(), // the comments
{
row: 3, column: 0, columnSpan: 5,
font: "italic 9pt sans-serif",
wrap: go.TextBlock.WrapFit,
editable: true, // by default newlines are allowed
minSize: new go.Size(10, 14)
},
new go.Binding("text", "comments").makeTwoWay())
) // end Table Panel
) // end Horizontal Panel
); // end Node
the second nodeTemplate:
myDiagram.nodeTemplate =
$(go.Node, "Vertical",
{
mouseEnter: function(e, node) { node.isHighlighted = true; },
mouseLeave: function(e, node) { node.isHighlighted = false; },
locationSpot: go.Spot.Center, // the location is the center of the Shape
locationObjectName: "SHAPE",
selectionAdorned: false, // no selection handle when selected
resizable: true, resizeObjectName: "SHAPE", // user can resize the Shape
rotatable: true, rotateObjectName: "SHAPE", // rotate the Shape without rotating the label
// don't re-layout when node changes size
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized
},
new go.Binding("layerName", "isHighlighted", function(h) { return h ? "Foreground" : ""; }).ofObject(),
$(go.Shape,
{
name: "SHAPE", // named so that the above properties can refer to this GraphObject
width: 70, height: 70,
strokeWidth: 3
},
// Color the built in shapes green, and the figures.js shapes Pink
new go.Binding("fill", "key", function(k) {
return isBuiltIn(k) ? "palegreen" : "lightpink";
}),
new go.Binding("stroke", "key", function(k) {
return isBuiltIn(k) ? "darkgreen" : "#C2185B";
}),
// bind the Shape.figure to the figure name, which automatically gives the Shape a Geometry
new go.Binding("figure", "key")),
$(go.TextBlock, // the label
{
margin: 4,
font: "bold 18px sans-serif",
background: 'white'
},
new go.Binding("visible", "isHighlighted").ofObject(),
new go.Binding("text", "key"))
);