Ports connecting to bottom by default

GoJS
1

,
i need to connect other ports, but by default it’s connecting to bottom port. how can i achieve this?

2

Are you specifying the port identifier for each end as two properties on each link data object? Have you set the GraphLinksModel.linkFromPortIdProperty and GraphLinksModel.linkToPortIdProperty properties to be the names of those two link data properties?

GoJS Ports in Nodes-- Northwoods Software, about general ports.

But considering how simple and small your nodes are, perhaps you should only have one port per node.

3

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.

4

Please Update on this issue

5

When I read that post I thought you were describing what you did to fix the problem. I did not see any explicit or implied question. I did see that the last screenshot showed what I thought you wanted. I’ll answer in your other topic, Default port issue.