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,