Curved links are not reshaping properly when connected to the non default ports

@mtalis wrote:

Curved links are not reshapable when a node has ports added to the template like this:

// four named ports, one on each side:
this.makePort('T', go.Spot.Top, false, true),
this.makePort('L', go.Spot.Left, true, true),
this.makePort('R', go.Spot.Right, true, true),
this.makePort('B', go.Spot.Bottom, true, false)

Where makePort is a function from your examples:

private makePort = (name, spot, output, input) => {
// the port is basically just a small circle that has a white stroke when it is made visible
return this.$(go.Shape, 'Circle',
          {
            fill: 'transparent',
            stroke: null,  // this is changed to 'white' in the showPorts function
            desiredSize: new go.Size(8, 8),
            alignment: spot, alignmentFocus: spot,  // align the port on the main Shape
            portId: name,  // declare this object to be a 'port'
            fromSpot: spot, toSpot: spot,  // declare where links may connect at this port
            fromLinkable: output, toLinkable: input,  // declare whether the user may draw links to/from here
            cursor: 'pointer'  // show a different cursor to indicate potential link point
          });

}

When commented out all makePort calls, the default port is used and the curved links are reshapable as expected.

Is it possible to have reshapable curved links connected to the non main ports?

Here is the linkTemplate:

this.myDiagram.linkTemplate =
this.$(go.Link,  // the whole link panel
{
  layerName: 'Background',
  relinkableFrom: true,
  relinkableTo: true,
  reshapable: true,
  routing: go.Link.Normal, movable: true,
  curve: go.Link.Bezier, adjusting: go.Link.Stretch,
  toShortLength: 3,

Posts: 3

Participants: 3

Read full topic