Hello,
I am trying to build a diagram having multiple inport, outport. The idea in abstract… after declaring gojs diagram, an empty model have been declared. Later I am adding node & link to the model from my local JS array. I think my makePort & makeTemplate function is working fine.
var $$ = go.GraphObject.make;
Diagram =
$$(go.Diagram, "graph",
{
....
}
);
self.nodeDataArray = [];
self.linkDataArray = [];
var graph_model_data = ({class: 'go.GraphLinksModel', nodeCategoryProperty: 'type', linkFromPortIdProperty: 'frompid', linkToPortIdProperty: 'topid', nodeDataArray: self.nodeDataArray, linkDataArray: self.linkDataArray});
Diagram.model = go.Model.fromJson(JSON.stringify(graph_model_data));
function makePort(name, leftside) {
....
}
function makeTemplate(typename, background, inports, outports) {
....
}
rels['nodeDataArray'].forEach(function(node) {
type = node.type;
name = node.name;
switch(type) {
case "Operator":
color = 'CadetBlue';
break;
case "Data":
color = 'SteelBlue';
break;
case "Service":
color = 'Teal';
break;
case "Operator":
color = 'CadetBlue';
break;
default:
color = 'SteelBlue';
}
var listOfInputPorts = [];
var listOfOutputPorts = [];
rels['linkDataArray'].forEach(function(link) {
//input port definition
if(node.key == link.to){
var aNewInputPort = makePort(link.topid, true);
listOfInputPorts.push(aNewInputPort);
}
//output port definition
if(node.key == link.from){
var aNewOutputPort = makePort(link.frompid, false);
listOfOutputPorts.push(aNewOutputPort);
}
Diagram.startTransaction("add link");
Diagram.model.addLinkData(link);
Diagram.commitTransaction("add link");
});
makeTemplate(type, color,
listOfInputPorts,
listOfOutputPorts);
Diagram.startTransaction("add node");
Diagram.model.addNodeData(node);
Diagram.commitTransaction("add node");
});
While I debugged, It seems nodes & ports are creating using same data from JS array. But, there is only one port in each node having same port_id while drawing the graph, even if the node suppose to have multiple port.
Probably. Could you please show me the result of JSON.stringify(Diagram.model.nodeDataArray[0]) and the result of JSON.stringify(Diagram.model.linkDataArray[0]) ?
I do not understand your data.
Your link data has “to” referring to the node data that you show, because the “key” matches.
But the “topid” values is “1355” which does not appear in that node data whose key is 1347.
In fact, the node data doesn’t appear to have any port identifiers at all. I suppose the particular ports could be defined in the node template, but that seems unlikely from what I can tell. Whatever the template is will be copied for each of the nodes created from the model data.
Actually when generating the data, back-end developer using same data for both node & port. I think, if several node data presents he is shuffling before assigning it as port id. So that port have unique ID within a node.
FYI, here is the complete nodeDataArray & linkDataArray.
Can you give idea, for what problem it would generate same node having same ports/data for a specific type of node (even if it is creating different node from the model data every time) ?
Your node data does not include port description information for each node data object, which means you must have a limited number of node templates that have all been predefined in the app. Make sure that you do not create or modify any templates when creating or loading any model.
