Linker Issue - Connect linker to the dynamically created Port

GoJS
1

Capture
I tried linking this and there is gap and it doesn’t link to the edge of the diamond…It perfectly links to the edge of the diamond if the text block below is removed. The diamond shape and the text block is inside a “Table”…Pasting the code below.

return go.GraphObject.make(go.Node, ‘Table’,
{
locationObjectName: ‘SHAPE’,
locationSpot: go.Spot.Center,
toolTip: this.tooltiptemplate,
selectionAdorned: false,
resizable: true,
},

  new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
      
      new go.Binding('layerName', 'isSelected', (s: boolean) => s ? 'Foreground' : '').ofObject(),
      // can be resided according to the user's desires
  { /*resizable: true,*/ resizeObjectName: 'SHAPE' },
  // go.GraphObject.make(go.TextBlock,
  //   { row: 0, column: 0, textAlign: 'center', margin:0, editable: false ,/*background:'green'*/},
  //   //new go.Binding('text').makeTwoWay(),
  //   //new go.Binding('font', 'font'),
  //  // new go.Binding('stroke', 'textColor')
  // ),
  go.GraphObject.make(go.Panel, 'Spot',
 // { row: 1, column: 1, name: 'SHAPE',stretch: go.GraphObject.Fill },
      go.GraphObject.make(go.Shape, 'Diamond',
              {
                /*row:0,column:0,*//*margin: new go.Margin(0,0,0,0) ,*/
                strokeWidth: 1, fill: this.GatewayNodeFill, stroke: this.GatewayNodeStroke,
                name: 'SHAPE',
                desiredSize: new go.Size(this.GatewayNodeSize, this.GatewayNodeSize),
                //  portId: '', fromLinkable: true, toLinkable: true, cursor: 'pointer',
                //  fromSpot: go.Spot.NotLeftSide, toSpot: go.Spot.AllSides
              },
              new go.Binding('desiredSize', 'size').makeTwoWay()),  // end main shape

              go.GraphObject.make(go.Shape, 'NotAllowed',
                      { /*row:0,column:0,*/ alignment: go.Spot.Center, stroke: this.GatewayNodeSymbolStroke, fill: this.GatewayNodeSymbolFill },
                      new go.Binding('figure', 'gatewayType', this.nodeGatewaySymbolTypeConverter),
                      // new go.Binding("visible", "gatewayType", function(s) { return s !== 4; }),   // comment out if you want exclusive gateway to be X instead of blank.
                      new go.Binding('strokeWidth', 'gatewayType', (s: number) => {
                        const type = 4;
                        return (s <= type) ? this.GatewayNodeSymbolStrokeWidth : 1;
                      }
                      ),
                      new go.Binding('desiredSize', 'gatewayType', this.nodeGatewaySymbolSizeConverter)),
                    // the next 2 circles only show up for event gateway
                    go.GraphObject.make(go.Shape, 'Circle',  // Outer circle
                            {
                              /*row:0,column:0,*/strokeWidth: 1, stroke: this.GatewayNodeSymbolStroke, fill: null, desiredSize: new go.Size(this.EventNodeSize, this.EventNodeSize)
                            },
                            new go.Binding('visible', 'gatewayType', (s: number) => {
                              const checkval = 5;
                              return s >= checkval;
                            }) // only visible for > 5
  ),  // end main shape
  
                          go.GraphObject.make(go.Shape, 'Circle',  // Inner circle
                            {
                              /*row:0,column:0,*/ alignment: go.Spot.Center, stroke: this.GatewayNodeSymbolStroke,
                              desiredSize: new go.Size(this.EventNodeInnerSize, this.EventNodeInnerSize),
                              fill: null
                            },
                            new go.Binding('visible', 'gatewayType', (s: number) => {
                              const checkval = 5;
                              return s === checkval;
                            }) // inner  only visible for == 5
                          ),
  ),
 
  this.makePort('T', go.Spot.Top, go.Spot.Top, true, false),
  this.makePort('L', go.Spot.Left, go.Spot.Left, false, true),
  this.makePort('R', go.Spot.Right, go.Spot.Right, true, false),
  this.makePort('B', go.Spot.Bottom, go.Spot.Bottom, true, false),

  
  
  go.GraphObject.make(go.TextBlock,
    { row: 2, column: 0, textAlign: 'center',margin:0, /*margin: new go.Margin(0, 0, 0, 0),*/ editable: true },
    new go.Binding('text').makeTwoWay(),
    new go.Binding('font', 'font'),
    new go.Binding('stroke', 'textColor')),
2

You need to set portId: "" on the object that you want to act as the port. You have commented it out, actually.

Please read GoJS Ports in Nodes-- Northwoods Software

I highly recommend that you decide on the overall design of your node – you have a lot of stuff that seems superfluous, including 4 ports that I believe you do not need.

In fact, I suggest that you start over with your node template. You just need something very simple: GoJS Nodes -- Northwoods Software

And you don’t really need any dynamically created port, do you?

3

Capture2
Capture2.PNG719×353 15.1 KB

Thank you Walt for your reply…Actually we need to avoid the spacing (as marked in the screen shot)…that’s why we have dynamically created the port…When multiple linker lines are drawn from a shape then there is some spacing issue as marked in the screen shot.

4

Don’t use “…Side” Spots. GoJS Link Connection Points on Nodes -- Northwoods Software

5

Walt…If we remove sides we don’t have an option then…ie.Without sides the options for fromSpot is very limited…For example if go.Spot.Right is given then I can’t link it from the top or bottom…Is there any option for us to add multiple argument in fromspot (something like fromSpot:bottom,center,top etc)

6

You didn’t say which “…Side” Spots you are using. I had assumed { fromSpot: go.Spot.RightSide, toSpot: go.Spot.LeftSide }.

If you are using go.Spot.AllSides or some other multi-side Spot, but you want the link point to only be at the center of the side of the port, you can set { portSpreading: go.Node.SpreadingNone } on the Node (not on the port). Node | GoJS API

1 Like
7

Thank you…Issue solved!!!