Link rerouting on flow chart example

Hi ,

in reference to flow chart example http://gojs.net/latest/samples/flowchart.html , i notice that when i change the textlabel in a node the link reroutes itself , i want a fixed rectangle and fixed textbox so that the rerouting is not done once when i edit the label. Could you help me with this?

my code so far - still the issue persists

$(go.Shape, “RoundedRectangle”,
{ stroke: null ,width: 150, height: 60},
new go.Binding(“figure”, “figure”),
new go.Binding(“fill”,“color”)),

  $(go.Panel, "Table",
    $(go.RowColumnDefinition,
      { column: 0, alignment: go.Spot.Left,width: 15}),
    $(go.RowColumnDefinition,
      { column: 6, alignment: go.Spot.Right,width:15}),
    $(go.RowColumnDefinition,
      { row: 0, alignment: go.Spot.Top}),
    $(go.RowColumnDefinition,
      { row: 5, alignment: go.Spot.Bottom }),
    $(go.RowColumnDefinition,
      { row: 3, alignment: go.Spot.Top, height:12 }),

   
    $(go.TextBlock,
        {
          column: 1, row: 1, rowSpan:4 , columnSpan:5, alignment: go.Spot.Center,
          font: "bold 11pt Helvetica, Arial, sans-serif",
          stroke: lightText,
          wrap: go.TextBlock.WrapFit,
          textAlign: "center",
          editable: true,
          maxSize: new go.Size(110, 30),
          minSize: new go.Size(110, NaN)
        },
        new go.Binding("text").makeTwoWay()
      ),

You didn’t show the whole node template. If you read http://gojs.net/beta/intro/panels.html, you’ll see how if you specify the size of an “Auto” Panel, you will constrain the size of the elements within the main shape.

the remaing parts are same as in the example , here you go

myDiagram.nodeTemplateMap.add("", // the default category
$(go.Node, “Spot”, nodeStyle(),
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
$(go.Shape, “RoundedRectangle”,
{ stroke: null ,width: 150, height: 60},
new go.Binding(“figure”, “figure”),
new go.Binding(“fill”,“color”)),

  $(go.Panel, "Table",
    $(go.RowColumnDefinition,
      { column: 0, alignment: go.Spot.Left,width: 15}),
    $(go.RowColumnDefinition,
      { column: 6, alignment: go.Spot.Right,width:15}),
    $(go.RowColumnDefinition,
      { row: 0, alignment: go.Spot.Top}),
    $(go.RowColumnDefinition,
      { row: 5, alignment: go.Spot.Bottom }),
    $(go.RowColumnDefinition,
      { row: 3, alignment: go.Spot.Top, height:12 }),

   
    $(go.TextBlock,
        {
          column: 1, row: 1, rowSpan:4 , columnSpan:5, alignment: go.Spot.Center,
          font: "bold 11pt Helvetica, Arial, sans-serif",
          stroke: lightText,
          wrap: go.TextBlock.WrapFit,
          textAlign: "center",
          editable: true,
          maxSize: new go.Size(110, 30),
          minSize: new go.Size(110, NaN)
        },
        new go.Binding("text").makeTwoWay()
      ),
      $(go.Panel, "Vertical",
      { column: 0, row: 1 ,height:12,alignment: go.Spot.LeftCenter},
      makePort("L1", go.Spot.LeftCenter, true, true)
      ),
      $(go.Panel, "Vertical",
      { column: 0, row: 2 ,rowSpan:2,height:12,alignment: go.Spot.LeftCenter,margin:new go.Margin(2, 0, 2, 0)},
      makePort("L2", go.Spot.LeftCenter, true, true)
     ),
      $(go.Panel, "Vertical",
      { column: 0, row: 4 ,height:12,alignment: go.Spot.LeftCenter},
      makePort("L3", go.Spot.LeftCenter, true, true)
     ),
      $(go.Panel, "Vertical",
      { column: 6, row: 1 ,height:12,alignment: go.Spot.RightCenter},
     makePort("R1", go.Spot.RightCenter, true, true)
     ),
      $(go.Panel, "Vertical",
      { column: 6, row: 2 ,rowSpan:2,height:12,alignment: go.Spot.RightCenter},
        makePort("R2", go.Spot.RightCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 6, row: 4 ,height:12,alignment: go.Spot.Right},
        makePort("R3", go.Spot.RightCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 1, row: 0,width:20 ,alignment: go.Spot.TopCenter,margin:2},
        makePort("T1", go.Spot.TopCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 2, row: 0,width:20 ,alignment: go.Spot.TopCenter,margin:2},
        makePort("T2", go.Spot.TopCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 3, row: 0 ,width:20,alignment: go.Spot.TopCenter,margin:2},
        makePort("T3", go.Spot.TopCenter, true, true)
      ),
      $(go.Panel, "Vertical",
      { column: 4, row: 0 ,width:20,alignment: go.Spot.TopCenter,margin:2},
        makePort("T4", go.Spot.TopCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 5, row: 0 ,width:20,alignment: go.Spot.TopCenter,margin:2},
        makePort("T5", go.Spot.TopCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 1, row: 5 ,width:20 ,alignment: go.Spot.BottomCenter},
        makePort("B1", go.Spot.BottomCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 2, row: 5,width:20 ,alignment: go.Spot.TopCenter },
        makePort("B2", go.Spot.BottomCenter, true, true)
      ),
      $(go.Panel, "Vertical",
      { column: 3, row: 5 ,width:20 ,alignment: go.Spot.TopCenter},
        makePort("B3", go.Spot.BottomCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 4, row: 5 ,width:20 ,alignment: go.Spot.TopCenter},
        makePort("B4", go.Spot.BottomCenter, true, true)
      ),
        $(go.Panel, "Vertical",
      { column: 5, row: 5 ,width:20 ,alignment: go.Spot.TopCenter},
        makePort("B5", go.Spot.BottomCenter, true, true)
      )
      
      
    // four named ports, one on each side:
    )

)

  );

myDiagram.nodeTemplateMap.add("Start",
  $(go.Node, "Spot", nodeStyle(),
    $(go.Panel, "Auto",
      $(go.Shape, "Circle",
        { minSize: new go.Size(40, 40), fill: "#79C900", stroke: null }),
      $(go.TextBlock, "Start",
        { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText },
        new go.Binding("text"))
    ),
    // three named ports, one on each side except the top, all output only:
    //makePort("L", go.Spot.Left, true, false),
    //makePort("R", go.Spot.Right, true, false),
    makePort("B", go.Spot.Bottom, true, false)
  ));

jQuery(’#create’).bind(‘click’,function(){
jQuery(’#cE’).css(‘display’,‘block’);
jQuery(’#cL’).css(‘display’,‘none’);
});

jQuery('#link').bind('click',function(){
  jQuery('#cL').css('display','block');
  jQuery('#cE').css('display','none');
});
jQuery('#createnew').bind('click',function(){
   myDiagram.startTransaction("make new node");
   var text = jQuery('#statename').attr('value');
   myDiagram.model.addNodeData({ key: text ,text:text});
   myDiagram.commitTransaction("make new node");
});

jQuery('#disable').bind('click',function(){
  myDiagram.isEnabled = false;
});
jQuery('#enable').bind('click',function(){
  myDiagram.isEnabled = true;
});
jQuery('#createlink').bind('click',function(){
  var text1 = jQuery('#from').attr('value');
  var text2 = jQuery('#to').attr('value');
  var text3 = jQuery('#tname').attr('value');
  myDiagram.startTransaction("make new node");
  myDiagram.model.addLinkData({ from: text1 ,to:text2,text:text3,fromPort:"B3", toPort:"T3"});
  myDiagram.commitTransaction("make new node");
});


jQuery('button[name=flow]').each(function(){
  var element = jQuery(this);
  element.bind('click',function(){
    var flowname = element.attr('id');
    if(flowname == "itflow"){
      jQuery('#mySavedModel').attr('value',JSON.stringify(itflow));
    }
    else if(flowname == "swflow"){
      jQuery('#mySavedModel').attr('value',JSON.stringify(swflow));
    }
    else{
      jQuery('#mySavedModel').attr('value',JSON.stringify(tcflow));
    }
    
    load();
  });
});
myDiagram.nodeTemplateMap.add("End",
  $(go.Node, "Spot", nodeStyle(),
    $(go.Panel, "Auto",
      $(go.Shape, "Circle",
        { minSize: new go.Size(40, 40), fill: "#DC3C00", stroke: null }),
      $(go.TextBlock, "End",
        { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText },
        new go.Binding("text"))
    ),
    // three named ports, one on each side except the bottom, all input only:
    makePort("T", go.Spot.Top, false, true),
    makePort("L", go.Spot.Left, false, true),
    makePort("R", go.Spot.Right, false, true)
  ));

myDiagram.nodeTemplateMap.add("Comment",
  $(go.Node, "Auto", nodeStyle(),
    $(go.Shape, "File",
      { fill: "#EFFAB4", stroke: null }),
    $(go.TextBlock,
      {
        margin: 5,
        maxSize: new go.Size(200, NaN),
        wrap: go.TextBlock.WrapFit,
        textAlign: "center",
        editable: true,
        font: "bold 12pt Helvetica, Arial, sans-serif",
        stroke: '#454545'
      },
      new go.Binding("text").makeTwoWay())
    // no ports, because no links are allowed to connect with a comment
  ));

OK, so if you make the change that I suggested, does the node behave the way that you want?

HI , I tried to add a new panel outlining the old one ,

myDiagram.nodeTemplateMap.add("",  // the default category
$(go.Node, "Spot", nodeStyle(),
$(go.Panel,"Viewbox",
    // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
    $(go.Shape, "RoundedRectangle",
        { stroke: null ,width: 150, height: 60},
        new go.Binding("figure", "figure"),
        new go.Binding("fill","color")),
    
  $(go.Panel, "Table",
    {width:150,height:60},
    $(go.RowColumnDefinition,
      { column: 0, alignment: go.Spot.Left,width: 15}),
    $(go.RowColumnDefinition,
      { column: 6, alignment: go.Spot.Right,width:15}),
    $(go.RowColumnDefinition,
      { row: 0, alignment: go.Spot.Top}),
    $(go.RowColumnDefinition,
      { row: 5, alignment: go.Spot.Bottom }),
    $(go.RowColumnDefinition,
      { row: 3, alignment: go.Spot.Top, height:12 }),

   
    $(go.TextBlock,
        {
          column: 1, row: 1, rowSpan:4 , columnSpan:5, alignment: go.Spot.Center,
          font: "bold 11pt Helvetica, Arial, sans-serif",
          stroke: lightText,
          wrap: go.TextBlock.WrapFit,
          textAlign: "center",
          editable: true,
          maxSize: new go.Size(110, 30),
          minSize: new go.Size(110, NaN)
        },
        new go.Binding("text").makeTwoWay()
      ),
      $(go.Panel, "Vertical",
      { column: 0, row: 1 ,height:12,alignment: go.Spot.LeftCenter},
      makePort("L1", go.Spot.LeftCenter, true, true)
      ),
      $(go.Panel, "Vertical",
      { column: 0, row: 2 ,rowSpan:2,height:12,alignment: go.Spot.LeftCenter,margin:new go.Margin(2, 0, 2, 0)},
      makePort("L2", go.Spot.LeftCenter, true, true)
     ),
      $(go.Panel, "Vertical",
      { column: 0, row: 4 ,height:12,alignment: go.Spot.LeftCenter},
      makePort("L3", go.Spot.LeftCenter, true, true)
     ),
      $(go.Panel, "Vertical",
      { column: 6, row: 1 ,height:12,alignment: go.Spot.RightCenter},
     makePort("R1", go.Spot.RightCenter, true, true)
     ),
      $(go.Panel, "Vertical",
      { column: 6, row: 2 ,rowSpan:2,height:12,alignment: go.Spot.RightCenter},
        makePort("R2", go.Spot.RightCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 6, row: 4 ,height:12,alignment: go.Spot.Right},
        makePort("R3", go.Spot.RightCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 1, row: 0,width:20 ,alignment: go.Spot.TopCenter,margin:2},
        makePort("T1", go.Spot.TopCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 2, row: 0,width:20 ,alignment: go.Spot.TopCenter,margin:2},
        makePort("T2", go.Spot.TopCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 3, row: 0 ,width:20,alignment: go.Spot.TopCenter,margin:2},
        makePort("T3", go.Spot.TopCenter, true, true)
      ),
      $(go.Panel, "Vertical",
      { column: 4, row: 0 ,width:20,alignment: go.Spot.TopCenter,margin:2},
        makePort("T4", go.Spot.TopCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 5, row: 0 ,width:20,alignment: go.Spot.TopCenter,margin:2},
        makePort("T5", go.Spot.TopCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 1, row: 5 ,width:20 ,alignment: go.Spot.BottomCenter},
        makePort("B1", go.Spot.BottomCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 2, row: 5,width:20 ,alignment: go.Spot.TopCenter },
        makePort("B2", go.Spot.BottomCenter, true, true)
      ),
      $(go.Panel, "Vertical",
      { column: 3, row: 5 ,width:20 ,alignment: go.Spot.TopCenter},
        makePort("B3", go.Spot.BottomCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 4, row: 5 ,width:20 ,alignment: go.Spot.TopCenter},
        makePort("B4", go.Spot.BottomCenter, true, true)
      ),
        $(go.Panel, "Vertical",
      { column: 5, row: 5 ,width:20 ,alignment: go.Spot.TopCenter},
        makePort("B5", go.Spot.BottomCenter, true, true)
      )
      
      
    // four named ports, one on each side:
    )
  )
  )


  );

myDiagram.nodeTemplateMap.add("Start",
  $(go.Node, "Spot", nodeStyle(),
    $(go.Panel, "Auto",
      $(go.Shape, "Circle",
        { minSize: new go.Size(40, 40), fill: "#79C900", stroke: null }),
      $(go.TextBlock, "Start",
        { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText },
        new go.Binding("text"))
    ),
    // three named ports, one on each side except the top, all output only:
    //makePort("L", go.Spot.Left, true, false),
    //makePort("R", go.Spot.Right, true, false),
    makePort("B", go.Spot.Bottom, true, false)
  ));

jQuery(’#create’).bind(‘click’,function(){
jQuery(’#cE’).css(‘display’,‘block’);
jQuery(’#cL’).css(‘display’,‘none’);
});

jQuery('#link').bind('click',function(){
  jQuery('#cL').css('display','block');
  jQuery('#cE').css('display','none');
});
jQuery('#createnew').bind('click',function(){
   myDiagram.startTransaction("make new node");
   var text = jQuery('#statename').attr('value');
   myDiagram.model.addNodeData({ key: text ,text:text});
   myDiagram.commitTransaction("make new node");
});

jQuery('#disable').bind('click',function(){
  myDiagram.isEnabled = false;
});
jQuery('#enable').bind('click',function(){
  myDiagram.isEnabled = true;
});
jQuery('#createlink').bind('click',function(){
  var text1 = jQuery('#from').attr('value');
  var text2 = jQuery('#to').attr('value');
  var text3 = jQuery('#tname').attr('value');
  myDiagram.startTransaction("make new node");
  myDiagram.model.addLinkData({ from: text1 ,to:text2,text:text3,fromPort:"B3", toPort:"T3"});
  myDiagram.commitTransaction("make new node");
});


jQuery('button[name=flow]').each(function(){
  var element = jQuery(this);
  element.bind('click',function(){
    var flowname = element.attr('id');
    if(flowname == "itflow"){
      jQuery('#mySavedModel').attr('value',JSON.stringify(itflow));
    }
    else if(flowname == "swflow"){
      jQuery('#mySavedModel').attr('value',JSON.stringify(swflow));
    }
    else{
      jQuery('#mySavedModel').attr('value',JSON.stringify(tcflow));
    }
    
    load();
  });
});
myDiagram.nodeTemplateMap.add("End",
  $(go.Node, "Spot", nodeStyle(),
    $(go.Panel, "Auto",
      $(go.Shape, "Circle",
        { minSize: new go.Size(40, 40), fill: "#DC3C00", stroke: null }),
      $(go.TextBlock, "End",
        { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText },
        new go.Binding("text"))
    ),
    // three named ports, one on each side except the bottom, all input only:
    makePort("T", go.Spot.Top, false, true),
    makePort("L", go.Spot.Left, false, true),
    makePort("R", go.Spot.Right, false, true)
  ));

myDiagram.nodeTemplateMap.add("Comment",
  $(go.Node, "Auto", nodeStyle(),
    $(go.Shape, "File",
      { fill: "#EFFAB4", stroke: null }),
    $(go.TextBlock,
      {
        margin: 5,
        maxSize: new go.Size(200, NaN),
        wrap: go.TextBlock.WrapFit,
        textAlign: "center",
        editable: true,
        font: "bold 12pt Helvetica, Arial, sans-serif",
        stroke: '#454545'
      },
      new go.Binding("text").makeTwoWay())
    // no ports, because no links are allowed to connect with a comment
  ));


// replace the default Link template in the linkTemplateMap
myDiagram.linkTemplate =
  $(go.Link,  // the whole link panel
    {
      routing:go.Link.AvoidsNodes,
      adjusting: go.Link.End,
      curve: go.Link.JumpOver,
      corner: 5, toShortLength: 4,
      relinkableFrom: true,
      relinkableTo: true,
      reshapable: true,
      resegmentable: true,
      // mouse-overs subtly highlight links:
      mouseEnter: function(e, link) { link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)";console.log(e) },
      mouseLeave: function(e, link) { link.findObject("HIGHLIGHT").stroke = "transparent"; },
      
    },
    new go.Binding("points").makeTwoWay(),
    $(go.Shape,  // the highlight shape, normally transparent
      { isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT" }),
    $(go.Shape,  // the link path shape
      { isPanelMain: true, stroke: "gray", strokeWidth: 2},
      new go.Binding("stroke","color").makeTwoWay()),
    $(go.Shape,  // the arrowhead
      { toArrow: "standard", stroke: null, fill: "gray"}),
    $(go.Panel, "Auto",  // the link label, normally not visible
      { visible: true, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5},
      new go.Binding("visible", "visible").makeTwoWay(),
      $(go.Shape, "RoundedRectangle",  // the label shape
        { fill: "white", stroke:null}),
      $(go.TextBlock,  // the label
        {
          textAlign: "center",
          font: "10pt helvetica, arial, sans-serif",
          stroke: "black",
          editable: true
        },
        new go.Binding("text", "text").makeTwoWay())
    )
  );

getting error in console (Uncaught Error: Viewbox Panel cannot contain more than one GraphObject.)

Could you help me with this , i want the recatngle , ports and textblock to be fixed so that when user edits the label of a node , size or position doesnt change resulting in routes remaining the same

Maybe using this approach will get you the results that you want:

I just want the node to remain the same in size and position after editing the textlabel so that the links are not changed . rerouting should be done only when the nodes position or size are changed . I went through that forum before creating this one and it didnot help , as mentioned there it doesnt work when loaded from json for the first time , it works only when links are reshaped ie when user reshapes the links atleast once. hope I am clear.

say the rectangle has a fixed size of (150,60) - when I edit the textBlock(maxsize(110,30)) , the nodes size and position doesnt change, so there is not a necessity for rerouting the links , how can i fix that.

my node template uses Panel.Spot , and i tried this as well - still reroute occurs on textlabel edit

$(go.Node, “Spot”, nodeStyle(),
{width:150,height:60},
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
$(go.Shape, “RoundedRectangle”,
{ stroke: null ,width: 150, height: 60},
new go.Binding(“figure”, “figure”),
new go.Binding(“fill”,“color”)),

  $(go.Panel, "Table",
    {width:150,height:60},
    $(go.RowColumnDefinition,
      { column: 0, alignment: go.Spot.Left,width: 15}),
    $(go.RowColumnDefinition,
      { column: 6, alignment: go.Spot.Right,width:15}),
    $(go.RowColumnDefinition,
      { row: 0, alignment: go.Spot.Top}),
    $(go.RowColumnDefinition,
      { row: 5, alignment: go.Spot.Bottom }),
    $(go.RowColumnDefinition,
      { row: 3, alignment: go.Spot.Top, height:12 }),

What that other topic talked about was setting Link.routing to go.Link.Orthogonal and Link.adjusting to go.Link.End.

If, as that person did, they wanted the AvoidsNodes routing but wanted to allow users to reshape link routes and have that route be maintained, I suggested that they initially have Link.routing be go.Link.AvoidsNodes and then change it to go.Link.Orthogonal in a “LinkReshaped” DiagramEvent listener. They could remember that routing state in the model by using a TwoWay Binding.

You could use the same implementation. If you don’t want to depend on the user’s reshaping of a link to turn off AvoidsNodes routing, you could do it at a different time. What time or event that is depends on when you want the AvoidsNodes routing to be done at all.

what i dont understand is why link reroutes when nodes position and size doesnt change ?
myDiagram.nodeTemplateMap.add("", // the default category
$(go.Node, “Spot”, nodeStyle(),
{width:150,height:60},
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
$(go.Shape, “RoundedRectangle”,
{ stroke: null ,width: 150, height: 60},
new go.Binding(“figure”, “figure”),
new go.Binding(“fill”,“color”)),

  $(go.Panel, "Table",
    {width:150,height:60},
    $(go.RowColumnDefinition,
      { column: 0, alignment: go.Spot.Left,width: 15}),
    $(go.RowColumnDefinition,
      { column: 6, alignment: go.Spot.Right,width:15}),
    $(go.RowColumnDefinition,
      { row: 0, alignment: go.Spot.Top}),
    $(go.RowColumnDefinition,
      { row: 5, alignment: go.Spot.Bottom }),
    $(go.RowColumnDefinition,
      { row: 3, alignment: go.Spot.Top, height:12 }),

   
    $(go.TextBlock,
        {
          column: 1, row: 1, rowSpan:4 , columnSpan:5, alignment: go.Spot.Center,
          font: "bold 11pt Helvetica, Arial, sans-serif",
          stroke: lightText,
          wrap: go.TextBlock.WrapFit,
          textAlign: "center",
          editable: true,
          maxSize: new go.Size(110, 30),
          minSize: new go.Size(110, NaN)
        },
        new go.Binding("text").makeTwoWay()
      ),
      $(go.Panel, "Vertical",
      { column: 0, row: 1 ,height:12,alignment: go.Spot.LeftCenter},
      makePort("L1", go.Spot.LeftCenter, true, true)
      ),
      $(go.Panel, "Vertical",
      { column: 0, row: 2 ,rowSpan:2,height:12,alignment: go.Spot.LeftCenter,margin:new go.Margin(2, 0, 2, 0)},
      makePort("L2", go.Spot.LeftCenter, true, true)
     ),
      $(go.Panel, "Vertical",
      { column: 0, row: 4 ,height:12,alignment: go.Spot.LeftCenter},
      makePort("L3", go.Spot.LeftCenter, true, true)
     ),
      $(go.Panel, "Vertical",
      { column: 6, row: 1 ,height:12,alignment: go.Spot.RightCenter},
     makePort("R1", go.Spot.RightCenter, true, true)
     ),
      $(go.Panel, "Vertical",
      { column: 6, row: 2 ,rowSpan:2,height:12,alignment: go.Spot.RightCenter},
        makePort("R2", go.Spot.RightCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 6, row: 4 ,height:12,alignment: go.Spot.Right},
        makePort("R3", go.Spot.RightCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 1, row: 0,width:20 ,alignment: go.Spot.TopCenter,margin:2},
        makePort("T1", go.Spot.TopCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 2, row: 0,width:20 ,alignment: go.Spot.TopCenter,margin:2},
        makePort("T2", go.Spot.TopCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 3, row: 0 ,width:20,alignment: go.Spot.TopCenter,margin:2},
        makePort("T3", go.Spot.TopCenter, true, true)
      ),
      $(go.Panel, "Vertical",
      { column: 4, row: 0 ,width:20,alignment: go.Spot.TopCenter,margin:2},
        makePort("T4", go.Spot.TopCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 5, row: 0 ,width:20,alignment: go.Spot.TopCenter,margin:2},
        makePort("T5", go.Spot.TopCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 1, row: 5 ,width:20 ,alignment: go.Spot.BottomCenter},
        makePort("B1", go.Spot.BottomCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 2, row: 5,width:20 ,alignment: go.Spot.TopCenter },
        makePort("B2", go.Spot.BottomCenter, true, true)
      ),
      $(go.Panel, "Vertical",
      { column: 3, row: 5 ,width:20 ,alignment: go.Spot.TopCenter},
        makePort("B3", go.Spot.BottomCenter, true, true)
      ),
       $(go.Panel, "Vertical",
      { column: 4, row: 5 ,width:20 ,alignment: go.Spot.TopCenter},
        makePort("B4", go.Spot.BottomCenter, true, true)
      ),
        $(go.Panel, "Vertical",
      { column: 5, row: 5 ,width:20 ,alignment: go.Spot.TopCenter},
        makePort("B5", go.Spot.BottomCenter, true, true)
      )
      
      
    // four named ports, one on each side:
    )

)

  );

link template:
myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{
routing:go.Link.AvoidsNodes,
adjusting: go.Link.End,
curve: go.Link.JumpOver,
corner: 5, toShortLength: 4,
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
resegmentable: true,
// mouse-overs subtly highlight links:
mouseEnter: function(e, link) { link.findObject(“HIGHLIGHT”).stroke = “rgba(30,144,255,0.2)”;console.log(e) },
mouseLeave: function(e, link) { link.findObject(“HIGHLIGHT”).stroke = “transparent”; },

    },
    new go.Binding("points").makeTwoWay(),
    $(go.Shape,  // the highlight shape, normally transparent
      { isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT" }),
    $(go.Shape,  // the link path shape
      { isPanelMain: true, stroke: "gray", strokeWidth: 2},
      new go.Binding("stroke","color").makeTwoWay()),
    $(go.Shape,  // the arrowhead
      { toArrow: "standard", stroke: null, fill: "gray"}),
    $(go.Panel, "Auto",  // the link label, normally not visible
      { visible: true, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5},
      new go.Binding("visible", "visible").makeTwoWay(),
      $(go.Shape, "RoundedRectangle",  // the label shape
        { fill: "white", stroke:null}),
      $(go.TextBlock,  // the label
        {
          textAlign: "center",
          font: "10pt helvetica, arial, sans-serif",
          stroke: "black",
          editable: true
        },
        new go.Binding("text", "text").makeTwoWay())
    )
  );

GoJS is invalidating link routes more frequently than it needs to. We aim to improve that in the future, just as we are better now about it than we had been before.

is there any event listener like “LinkReshaped” for label change on a node that I can use to get the desired functionality , Please do let me know when this fix will be available , we want to purchase it with the fix since it is vital for us.
Thank you

Sort-of. You could do something like this:

myDiagram.toolManager.textEditingTool.acceptText = function(reason) {
  var links = myDiagram.links;
  links.each(function(l) { l.suspendsRouting = true; });
  go.TextEditingTool.prototype.acceptText.call(this, reason);
  links.each(function(l) { l.suspendsRouting = false; });
}

That will suspend the link routing during updates from the TextEditingTool.

Link.suspendsRouting is undocumented and not meant for general use, but it will work in cases like this. You must be sure to set it back to false for every link that you set it to true for.

Thanks Simon , will try and get back to you