Diferent Point or port connection to node Automatically

GoJS
1

How I do for connect diferent lines in diferents parts of node automatically? because alwais connect in the same part example:

problema5.png722×288 8.84 KB

2

I don’t understand what it is that you want instead.

3

if I have 3 lines that connect to a node they connect in the same point or port of a node. I want each line to automatically connect to different port or parts of the node.

4

Set toSpot to a “…Side” Spot such as go.Spot.AllSides or go.Spot.LeftSide.

You might also want to do that for the fromSpot.

Both toSpot and fromSpot, like all port-related properties, should be set on the GraphObject acting as the port, which might be the whole Node in your case.

Please read GoJS Link Connection Points on Nodes -- Northwoods Software.

5

Hi walter, I use:

fromSpot: go.Spot.RightSide
toSpot: go.Spot.AllSides

But fromSpot: go.Spot.RightSide doesn’t work or fromSpot:AllSides

and i have this error Uncaught TypeError: Cannot read property ‘oi’ of null

6

Could you please elaborate on what properties you have set on the port? And what is your link template?

7

This is my code:

myDiagram.linkTemplate =
    $(go.Link,
      { routing: go.Link.AvoidsNodes },  // link route should avoid nodes
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );

myDiagram.nodeTemplate =
      $(go.Node, "Auto",{
          avoidableMargin: (0, 0, 0, 0), 
          fromSpot: go.Spot.RightSide, 
          toSpot: go.Spot.AllSides 
          },
        $(go.Shape, "Rectangle",  // the border
          { fill: "white", strokeWidth: 2 },.......
8

That looks OK to me. What are you using for your Diagram.layout? Some layouts automatically set the Link.fromSpot and/or Link.toSpot. But it looks to me that you are using GridLayout, which does not do that.

When I modified the Entity Relationship sample to allow copying, and I moved the nodes around to be in a grid-like arrangement, I got the expected results:

You might get slightly better results if there were a little bit more space between the nodes.

9

For my diagram Layout:

myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          initialAutoScale: go.Diagram.Uniform,
          //initialPosition:
          initialContentAlignment: go.Spot.Center, 
          allowZoom: true,       
          layout: $(go.GridLayout,{wrappingColumn: 9, wrappingWidth: Infinity})
        });
10

Try adding:

spacing: new go.Size(30, 30)

to the GridLayout initialization.

Basically you need to leave enough space to allow the links to turn at different distances from/to the nodes.

11

:( fromSpot: go.Spot.RightSide doesn’t work… appear one line, i use spacing: new go.Size(30, 30) but is the same

12

Can you tell me how to reproduce the problem? When I try it in the Entity Relationship sample, replacing the Diagram.layout with:

layout: $(go.GridLayout, { wrappingColumn: 4, wrappingWidth: Infinity, spacing: new go.Size(30, 30) }),

and changing the node template’s fromSpot to:

          fromSpot: go.Spot.RightSide,
          toSpot: go.Spot.AllSides,

I get this result:

image.png724×177 56.7 KB

where there are two links coming out of “Products” and one link going into “Products” from “Order Details”.

13

Hi Walter, this is all my code. What i am doing bad? Please help me

    myDiagram.linkTemplate =
    $(go.Link,
      { routing: go.Link.AvoidsNodes },  // link route should avoid nodes
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );

myDiagram.nodeTemplate =
      $(go.Node, "Auto",{
          avoidableMargin: (0, 0, 0, 0), 
          fromSpot: go.Spot.RightSide, 
          toSpot: go.Spot.AllSides 
          },
        $(go.Shape, "Rectangle",  // the border
          { fill: "white", strokeWidth: 2 },.......
14

Well, the first thing I saw was that you specified fromSpot to be go.Spot.Right, not go.Spot.RightSide.

After fixing that, I also got that error that you first reported. I have just fixed that bug (I hope) and you can try the future version 1.8.19 at GoJS - Build Interactive Diagrams for the Web.

Thanks for reporting the bug and providing a reproducible case. Please tell us if it fixes the problem that you had.

15

Ok Thank you Walter, but i cant download beta version 1.8.19. Actually beta version is 1.8.18 in this link GoJS - Build Interactive Diagrams for the Web

16

Do you need to force a reload of the files from there? If you look at the first lines of https://gojs.net/beta/release/go.js, you will see that it says version 1.8.19.

17

Hi walter, everything is almost fine, but apparently the lines turn in the same position. Could it be by the border of the groups? because if you see all lines do the same. what can i do in this case?

18

You could set Link.corner to some number and Link.curve to one of the go.Jump... enum values. You could color the links differently.

19

i did: { routing: go.Link.AvoidsNodes, corner: 10 } but only rounded corners, does not separate the lines.

20

Yes, that’s right – the routing is only “AvoidsNodes”. The routing is not aware of any other links.

However the user could manually adjust the routes, or you could do so programmatically if you know how to do what you want.