Hello,
I’m trying to create dynamic decision tree.
Link Template is
myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{ routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 5, toShortLength: 4,
relinkableFrom: true, relinkableTo: true, reshapable:true },
new go.Binding(“fromPortId”, “fromport”),
$(go.Shape, // the link path shape
{ isPanelMain: true,
stroke: “gray”, strokeWidth: 2 }),
$(go.Shape, // the arrowhead
{ toArrow: “standard”,
stroke: null, fill: “black”}),
$(go.Panel, “Auto”,
{ visible: false, name: “LABEL”, segmentIndex: 2, segmentFraction: 0.5},
new go.Binding(“visible”, “visible”).makeTwoWay(),
$(go.Shape, “RoundedRectangle”, // the link shape
{ fill: “#F8F8F8”, stroke: null }),
$(go.TextBlock, “Yes” ,// the label
{ textAlign: “center”,
font: “10pt helvetica, arial, sans-serif”,
stroke: “#919191”,
margin: 2, editable: true },
new go.Binding(“text”, “text”).makeTwoWay())
)
);
Node Template is
myDiagram.nodeTemplateMap.add(“decisionTree”,
$(go.Node, “Auto”,
new go.Binding(“text”, “text”),
// define the node’s outer shape, which will surround the Horizontal Panel
$(go.Shape, “Rectangle”,
{ fill: “whitesmoke”,
stroke: “lightgray” }),
// define a horizontal Panel to place the node’s text alongside the buttons
$(go.Panel, “Horizontal”,
$(go.TextBlock,
{ font: “10pt sans-serif”,
margin: 5 },
new go.Binding(“text”, “text”)),
// define a vertical panel to place the node’s two buttons one above the other
$(go.Panel, “Vertical”,
$(“Button”,
{ name: “ButtonA”,
click: function (e, obj) { buttonExpandCollapse(obj, “ButtonA”); },
},
new go.Binding(“portId”, “a”),
$(go.TextBlock,
{ font: “8pt Helvetica, Arial, sans-serif”,
stroke: “black”,
textAlign: “center”,
margin: 5,
maxSize: new go.Size(100, NaN),
wrap: go.TextBlock.WrapFit,
editable: true },
new go.Binding(“text”, “aText”).makeTwoWay())
),
$(“Button”,
{ name: “ButtonB”,
click: function (e, obj) { buttonExpandCollapse(obj, “ButtonB”); },
},
new go.Binding(“portId”, “b”),
$(go.TextBlock,
{editable: true},
new go.Binding(“text”, “bText”))
)
)
)
));
I have a pallete on LHS with decision Node,
{category:“decisionTree”,text:“Decision Tree”,aText:“NodeA”,bText:“Node B”,a:"",b:""}
on drop of the node to rhs im setting the ports
myDiagram.addDiagramListener(“ExternalObjectsDropped”,function(e) {
var sel = e.diagram.selection;
var elem = sel.first();
elem.data.a = elem.data.key+“a”;
elem.data.b = elem.data.key+“b”;
}
on Click of a button im creating a node and linking it:
function buttonExpandCollapse(obj, shapename) {
var selnode = obj.part;
if (!(selnode instanceof go.Node)) return;
myDiagram.startTransaction(“add node and link”);
var shape = selnode.findObject(shapename);
var portid ;
if(shapename == “ButtonA”){
portid = selnode.data.a;
}else{
portid = selnode.data.b;
}
var newnode = { category: “decisionTree”, text:“Decision Tree”, aText:“Node A”,bText:“Node B”,a:"",b:""};
myDiagram.model.addNodeData(newnode);
newnode.a = newnode.key+“a”;
newnode.b = newnode.key+“b”;
var newlink = { from: selnode.data.key, fromPort:portid, to: newnode.key };
myDiagram.model.addLinkData(newlink);
myDiagram.commitTransaction(“add node and link”);
}
but the link is from port b to port b even though i have clicked on ButtonA
can u please tell me what am i doing wrong?
The problem seems to be that you are specifying a fromPort but not a toPort in your new link.