Gap between link and node


#1

Hi,
When I create a link between 2 nodes, i get a small gap between the link ends and the node.
See attached pic :


But when i save the diagram to JSON and then reload it from the database, the gap is closed :

I use the same templates. I don’t understand the reason for the gap.


#2

That is odd. Still, I think the problem is that you haven’t declared the (default) port of each node to be that small round shape. Just set its portId: "". Please read https://gojs.net/latest/intro/ports.html#SinglePorts


#3

Added the portId to the picture and problem was fixed. Thanks.
So, what if a want to connect two parallel links between nodes, one between Spot(y=0.2) and the second between Spot(y=0.8). Will i have to set port for each link ?
I have tried to toSpot/fromSpot and it does locate the link at the right sport, yet when i move the nodes around, the link retain on the same spot.
I need that the link will be adjusted automatically to the “normal” spot when nodes are moved, for example switch places.


#4

Do you have some small sketches/screenshots that show all the cases that you want? I assume you have read about fromSpot and toSpot: https://gojs.net/latest/intro/connectionPoints.html


#5

This is exactly the problem,
When i don’t set the toSpot/fromSpot the link “floats” around any time i move the node. The link adjusts its location automaticaly as the node is dragged.
As soon as i set the toSpot/fromSpot, the link is “nailed” to the spot
Take a look at the pic.
I would like to have 2 parallel links withouht setting the spot location (because the link is nailed)


#6

Perhaps you want to set both fromSpot and toSpot to go.Spot.AllSides, or some other “…Side” Spot? https://gojs.net/latest/api/symbols/Spot.html#AllSides


#7

If we look at the pic, in order to set the links as shown, i need to set:

link1.fromSpot(1,0.2), link1.toSpot(0,0.2) // the upper link
link2.fromSpot(1,0.6), link2.toSpot(0,0.6) // the lower link

If i set these values, the links get nailed.
If i set the AllSide I wont be able to set their parallel location.


#8

That can work, but as you say, the link connection points are now “fixed” and unchanging based on the relative positions of the nodes. But using go.Spot.AllSides should work. Here’s an example:

    myDiagram.nodeTemplate =
      $(go.Node, "Vertical",
        $(go.Shape,
          { fill: "beige", stroke: "gray", width: 40, height: 40 },
          { portId: "", fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          new go.Binding("text"))
      );

and one gets:
image

Perhaps you want to use go.Spot.NotBottomSide to avoid having links going through the text label.


#9

Let’s see if i understand.
I should set the LINK to/fromSpot as i wrote before and in the nodeTemaplte i should use AllSides ?
That will enable the links to float from side to side ?


#10

No, don’t set the Link.fromSpot or Link.toSpot at all. The default values for those two properties will cause the actual spots to be taken from the connected port. https://gojs.net/latest/api/symbols/Link.html#computeSpot


#11

i just made a test, set the links to/from Spot, set the node Template and i got parallel links that floats wheneverr i move the node


#12

Those links look parallel to me. Although you haven’t declared the Picture as the port, so it appears that the whole node is acting as the default port.


#13

My mistake,
i set the link to/fromSpot properly and the links went parallel.
I also set the AllSides for the node Template.
Still, when i move the links, the links are nailed to the spot.
So, how do i make them parallel without setting the to/fromSpot ?
I’m lost…


#14

As I said above:


#15

I see,
So set the AllSides on the node template and NOT set the to/fromSpot on the link object.
It works fine. YET, when i set the portId on the picture object, all links are packed near each other.
So there is kind of trade of :
In order to put the link in parallel i shouldn’t set the portId (which was the problem in first place).


#16

Port-related properties, which include most properties starting with “from” or “to”, should go on the port element in the node template, not necessarily on the Node element.

So if you change the element that has its portId property set (or bound) to a string, you should move all of the port-related properties too.


#17

I’m not quite sure which properties to set and on which template ?
Could you be more specific ?


#18

I thought I was very specific in my previous statements. Don’t set or bind fromSpot or toSpot in your link template(s). Set it on the port element(s) in your node template(s).


#19

I see,
So, i have a go.Picture element with portId set to “”.
I set on it the to/fromSpot AllSides and all links are now set parallel and floats where ever the node goes.
Thanks very much.