My node template is as follows
myDiagram.nodeTemplateMap.add(“decisionTree”,
$(go.Node, “Table”,
{ locationObjectName: “BODY”,
locationSpot: go.Spot.Center,
selectionObjectName: “BODY”,
selectionAdornmentTemplate:
$(go.Adornment, “Auto”,
$(go.Shape, “Rectangle”,
{ stroke: “dodgerblue”,
strokeWidth: 3,
fill: null }),
$(go.Placeholder)
),
},
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
// the body
$(go.Panel, “Auto”,
{ row: 1, column: 1, name: “BODY”,
stretch: go.GraphObject.Fill },
$(go.Shape, “Rectangle”,
{ fill: bluegrad,
minSize: new go.Size(56, 56) }),
$(go.TextBlock,
{ margin: 10, textAlign: “center”,isMultiline:true, wrap:go.TextBlock.WrapFit,width: 80 },
new go.Binding(“text”, “maintext”)),
$(go.TextBlock,
{ margin: 10, textAlign: “center”,visible:false },
new go.Binding(“type”, “type”))
), // end Auto Panel body
// the Panel holding the left port elements, which are themselves Panels,
$(go.Panel, “Vertical”,
{ row:1, column:2,
itemTemplate:
$(go.Panel,“Vertical”,
{
alignment: go.Spot.Left
},
$(“Button”, // button A
{
click: buttonExpandCollapse, fromLinkable: true, toLinkable: true, toSpot: go.Spot.Right,cursor: “pointer”
},
new go.Binding(“name”, “name”),
new go.Binding(“portId”, “portId”),
makePort(“R”, go.Spot.Right, true, true),
$(go.TextBlock,
new go.Binding(“text”, “text”)),
$(go.TextBlock,
{
visible:false
},
new go.Binding(“nodekey”, “nodekey”),
new go.Binding(“operatorValue”, “operatorValue”),
new go.Binding(“nodekey2”, “nodekey2”))
) // end button A
) // end itemTemplate
},
new go.Binding(“itemArray”, “nodeArray”),
new go.Binding(“sourceBT”, “sourceBT”),
new go.Binding(“targetArray”, “targetArray”)
) ,
// ,end Horizontal Panel
$(go.TextBlock,
{ name:“terminalTextBlock”,row:1, column:3,visible:false,width: 100, wrap: go.TextBlock.WrapDesiredSize,isMultiline:true, },
new go.Binding(“text”, “terminalText”)),
makePort(“L”, go.Spot.Left, true, true)// end Auto Panel body
)); // end Node
On click of “node0” in start node it will automatically create a node and link as done in decision tree . how can i manually connect each node to another node eg: node0 to terminal.
I want two ports one on RHS of node0 another on LHS of start node.
tried by creating make port function but it doesnt seem to work please help
You need to create link data and set the relevant properties:
var model = myDiagram.model;
var linkdata = {};
linkdata[model.linkFromKeyProperty] = // the from key, ie model.getKeyForNodeData(fromData);
linkdata[model.linkToKeyProperty] = //the to key, ie model.getKeyForNodeData(toData);
linkdata[model.linkFromPortIdProperty] = // the name of the from port, ie “L”
linkdata[model.linkToPortIdProperty] = // the name of the to port, ie “R”
// and add the link data to the model
model.addLinkData(linkdata);
var model = $(go.GraphLinksModel,
{ linkFromPortIdProperty: “fromport”,linkToPortIdProperty: “toport” });
/
var newlink = { from: selnode.data.key,fromport:portid,toport:newnode.key, to: newnode.key};
// add the new link to the model
myDiagram.model.addLinkData(newlink);
I have defined the above properties . Manually in the sense using mouse pointer .
function makePort(name, spot, output, input) {
return $(go.Shape,
{
figure: “Circle”,
fill: “transparent”,
stroke: null,
desiredSize: new go.Size(6, 6),
alignment: spot, alignmentFocus: spot,
portId: name,
fromSpot: spot, toSpot: spot,
fromLinkable: output, toLinkable: input,
cursor: “pointer”
});
}
and i dont see the port also my make port function is as above
You wrote
var model = $(go.GraphLinksModel,
{ linkFromPortIdProperty: “fromport”,linkToPortIdProperty: “toport” });
But do you assign/use this model afterwards?
What you have there is fundamentally correct, assuming everything else you have is correct. Something else must be wrong.
Here’s a very simplified example showing link data with ports working:
[EDIT: removed obsolete sample]
The code:
// define a simple Node template
myDiagram.nodeTemplate =
$(go.Node, “Vertical”,
$(go.Shape, “Rectangle”,
{ width: 50, height: 50, portId: ‘Rect’ },
// Shape.fill is bound to Node.data.color
new go.Binding(“fill”, “color”)),
$(go.TextBlock,
{ margin: 3 }, // some room around the text
// TextBlock.text is bound to Node.data.key
new go.Binding(“text”, “key”)),
$(go.Shape, “Circle”,
{ width: 50, height: 50, portId: ‘Circle’ },
// Shape.fill is bound to Node.data.color
new go.Binding(“fill”, “color”))
);
// but use the default Link template, by not setting Diagram.linkTemplate
var model = $(go.GraphLinksModel,
{ linkFromPortIdProperty: “fromport”,linkToPortIdProperty: “toport” });
var nodeDataArray = [
{ key: “Alpha”, color: “lightblue” },
{ key: “Beta”, color: “orange” },
{ key: “Gamma”, color: “lightgreen” },
{ key: “Delta”, color: “pink” }
];
model.nodeDataArray = nodeDataArray;
myDiagram.model = model;
// enable Ctrl-Z to undo and Ctrl-Y to redo
// (should do this after assigning Diagram.model)
myDiagram.undoManager.isEnabled = true;
var link = { from: “Alpha”, to: “Beta”, fromport: ‘Circle’, toport: ‘Rect’ };
myDiagram.model.addLinkData(link);
var link2 = { from: “Gamma”, to: “Delta”, fromport: ‘Circle’, toport: ‘Circle’ };
myDiagram.model.addLinkData(link2)