Link connecting to node not to port


#1

hi, when i want to connect the two nodes, i want to connect it from the ports, but it default taking the link from the node center, how to change the settings from node center to the port?


Integrating GoJS 1.8.17 with a Angular App
#2

First, make sure your node template is structured to have port(s) the way you want. http://gojs.net/latest/intro/ports.html

Second, if you have more than one port per node, you need to use a GraphLinksModel that has linkFromPortIdProperty and linkToPortIdProperty set to the port-identifying property names on your link data. This is also discussed at http://gojs.net/latest/intro/ports.html.


#3

so, that means, when i initialize the node (creation of node with ports) in that we need to use these properties (linkFromPortIdProperty and linkToPortIdProperty) right?


#4

Yes, that is what that Introduction page states, and that is what all of the samples do if they support multiple ports per node.

Note also that if your link data specifies a port identifier that does not exist on a node (i.e. there’s no element in the node’s visual tree with GraphObject.portId equal to the given identifier), then the link will connect with the default port.


#5

I have a node with multiple ports and placeholder ports. When im drawing the link the link is connected to the placeholder ports. How can i set linkFromPortIdProperty and linkToPortIdProperty to the port-identifying property names on the link data?


#6

this is my code which i have added at the time of creation of the node and the ports.

diagram.model =
goObj(go.GraphLinksModel,
{ linkFromPortIdProperty: “fromPort”, // required information:
linkToPortIdProperty: “toPort”, // identifies data property names
});


#7

Yes, that’s right. Then you can assign GraphLinksModel.linkDataArray with an Array of objects that use those two properties, in addition to the usual properties (“from” and “to”, by default) to refer to the two nodes.


#8

am sorry for troubling you walter. see i will tell you my application content.

i have 4 ports in the node, the nodes are added dynamically, but the problem is that when i try to connect the ports between two dynamically added nodes, the link should be connected to the 2 ports, but it is not happening like that, it is being connected to the node center not to the port. i am unable to figure out how to get the things done.

i referred the document which you have provided to me, and from the document, where should i put the graphLinksModel in which section or the place, i.e,. at the time of the node creation or in go.Diagram?


#9

What is the link data object that you are adding to the model by calling GraphLinksModel.addLinkData? What are the identifiers of the two ports?

It should be something like:
{ from: 23, fromPort: "out", to: 45, toPort: "in" }
assuming 23 and 45 are the keys of the two nodes and “out” and “in” are the names of the two ports that you want to connect.


#10

How to set
"linkFromPortIdProperty": "fromPort", "linkToPortIdProperty": "toPort",

when the data is coming dynamically.

I am using angular 5.


#11

Those two GraphLinksModel properties need to have been set on the model when it was created. And other model properties too.

Each model instance might have data using different properties. In other words, the node data or link data that is used in one model could not be used in a different model because the properties that the data has would not make sense in the other model.