We have an application which has tabbed interface, where we have 2 tabs named “Design” and “Function”.
Both the tabs use the same pallete but different DIV to render the diagram. For the Design tab the div used is static and for the Function tab dive used is dynamic. We use create go.diagram, within the div.
On load of the screen, we create all the required node, link , group templates for the Design tab. On click of Function tab we copy the templates from Design tab to Function tab.
As seen in the first image
when we connect two nodes in the Design tab it connects properly as desired and set fromPort and toPort and created a Link Data Array as below
“linkDataArray”: [
{
“fromport”: “R”,
“from”: “start”,
“to”: -1,
“toport”: “L”
}
]
But in the function tab when we link 2 nodes the fromPort and toPort is set to null and created Link Data Array is as below
“linkDataArray”: [
{
“from”: “start”,
“to”: -1
}
]
Also the link connects to bottom by default (as seen in img2)
. This we assume is because the fromPort and toPort are not set
Template used in the Design tab diagram are:
myDiagram.nodeTemplateMap.add(“Step”,
(go.Node, "Vertical", { selectionAdornmentTemplate: UndesiredEventAdornment },{resizable: true,isShadowed:false}, nodeStyle(),new go.Binding("text", "key"),
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify,{routing:go.Link.AvoidsNodes}),
(go.Panel, go.Panel.Auto,
(go.Picture,
{ desiredSize: new go.Size(24, 24) },
new go.Binding("source", "source")),
makePort("T", go.Spot.Top , true, true),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, true)),
(go.TextBlock, // the text label
{ font: “10pt Helvetica, Arial, sans-serif”,
stroke: “black”,
textAlign: “center”,
margin: 5,
maxSize: new go.Size(100, NaN),
wrap: go.TextBlock.WrapFit,
editable: false },
new go.Binding(“text”, “comments”).makeTwoWay())
));
myDiagram.nodeTemplateMap.add(“circle”,
(go.Node, "Vertical", { selectionAdornmentTemplate: UndesiredEventAdornment },{resizable: true,isShadowed:false}, nodeStyle(),new go.Binding("text", "key"),
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify,{routing:go.Link.AvoidsNodes}),
(go.Panel, go.Panel.Auto,
(go.Picture, // the icon showing the logo
{ desiredSize: new go.Size(24, 24) },
new go.Binding("source", "source")),
makePort("T", go.Spot.Top , true, true),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, true)),
(go.TextBlock, // the text label
{ font: “8pt Helvetica, Arial, sans-serif”,
stroke: “black”,
textAlign: “center”,
margin: 5,
maxSize: new go.Size(100, NaN),
wrap: go.TextBlock.WrapFit,
editable: false },
new go.Binding(“text”, “comments”).makeTwoWay())
));
The way templates are copied from Design to Function tab is as below
myDiagramDiv.nodeTemplateMap = myDiagram.nodeTemplateMap
myDiagramDiv.groupTemplateMap = myDiagram.groupTemplateMap
myDiagramDiv.linkTemplate = myDiagram.linkTemplate
var model1 = $(go.GraphLinksModel,{ linkFromPortIdProperty: “fromport”,linkToPortIdProperty: “toport” });
model1.nodeDataArray = nodeDataArray;
model1.linkDataArray = linkDataArray;
myDiagramDiv.model = model1;
We also tried, by copying the full code from Design to Function, instead of the above snippet of the code, but ended up with the same results.
To isolate the issue, we explicitly specified the fromport and toport in the json and tried to render that object back in diagram. In the json we specified the following
“linkDataArray”: [
{
“fromport”: “R”,
“from”: “start”,
“to”: -1,
“toport”: “L”
}
]
Then in the function tab, the diagram as below is displayed.
