Linker Issue: Issue connecting link from the 'Diamond' shape


#1

Image1
In this image u can see that the linker is connected from the right side of the diamond…But I tried Connceting the link from the bottom of the diamond;;

If the Subprocess is directly below the gateway(Diamond) then I am able to connect it from the bottom of the Diamond
Pasting the code here:

    //create gateway node template
    return go.GraphObject.make(go.Node, 'Table',
      {
        locationObjectName: 'SHAPE',
        locationSpot: go.Spot.TopLeft,
        toolTip: this.tooltiptemplate,
        selectionAdorned: false,
        resizable: true,
       // fromSpot: go.Spot.None, toSpot: go.Spot.None,
        portSpreading: go.Node.SpreadingNone, //Gets or sets how link points are computed when the port spot is a "side" spot. The default value is Node.SpreadingEvenly.

      },
      new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
      // move a selected part into the Foreground layer, so it isn't obscured by any non-selected parts
      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.Panel, 'Auto',
        go.GraphObject.make(go.Shape, 'Diamond',
          {
            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.None, toSpot: go.Spot.None
          },

          new go.Binding('desiredSize', 'size').makeTwoWay(),
          new go.Binding('fill', 'fill').makeTwoWay(),
          new go.Binding('stroke', 'stroke').makeTwoWay(),
        ),  // end main shape
        go.GraphObject.make(go.Shape, 'NotAllowed',
          { 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
          {
            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
          {
            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
        ),

      ),

      go.GraphObject.make(go.TextBlock,
        { row: 1, 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')),

      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, true),
      this.makePort('B', go.Spot.Bottom, go.Spot.Bottom, true, false),
    );
  }```

#2

It appears that the node template defines 5 different ports: 4 small ports that are on each side, plus 1 large port that is the Diamond Shape.

Because the link in your case does not remain connected at any side, the link is not connected with any small side port, but is connected with the large diamond-shaped port. That is the correct behavior, even if it is not your intention in this case. The user must makes sure that they start (or finish) drawing a new link from one of the small side ports, if that is their intent. If they start from (or finish at) the large port, the link will be connected with that large port and thus the end point will be on the side closest to the other node.


#3

Hey Walt,
Will we able to remove the “Larger Port” which you were mentioning? If so how to remove that larger port? It may be the correct procedure but our client needs it in the way I sated it. SO please give me a solution?


#4

To avoid making a GraphObject act as a port, don’t set its portId to any string.


#5

No Walt it didn’t help me…


#6

Walt,
I need that linker to be drawn from the bottom of the diamond if it’s dragged from the bottom…In my cases if the subprocess is directly below the diamond you can draw a linker from the gateway…If its like in the image then it the linker automatically goes to the right edge of the diamond


#7

Take a look at the Draggable Links sample: https://gojs.net/latest/samples/draggableLink.html

Those nodes have five ports – the four ports that you seem to have added, plus the default port which is the big shape in the middle. If you comment out that assignment of portId: "" (and the associated port properties), I think you will find that that sample behaves in the manner that you expect.

Perhaps you have not enabled use of multiple ports by setting the GraphLinksModel properties? https://gojs.net/latest/intro/ports.html#GeneralPorts


#8

if I comment out “portId: “”” then the connector will be going out of focus.That is it won’t get connected to the edge of the diamond…


#9

Have you “set GraphLinksModel.linkToPortIdProperty and GraphLinksModel.linkFromPortIdProperty to be the names of two properties on your link data”, as recommended in https://gojs.net/latest/intro/ports.html#GeneralPorts ?


#10

Walt please give me an example of GraphLinksModel.linkToPortIdProperty and GraphLinksModel.linkFromPortIdProperty with the code given above


#11

https://gojs.net/latest/samples/flowchart.html demonstrates the use of more than one port per node.