Links dislocate

$scope.LoadDataInFlowChart = function () {
debugger;
var diagramData = {
“class”: “go.GraphLinksModel”,
“linkFromPortIdProperty”: “fromPort”,
“linkToPortIdProperty”: “toPort”,
“nodeDataArray”: nodeDataArray,
“linkDataArray”: linkDataArray
};

    $scope.myDiagram.model = go.Model.fromJson([]); /
    $scope.myDiagram.model = go.Model.fromJson(diagramData);
    
};

$scope.InitializeFlowChart = function () {
    debugger;

    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;  // for conciseness in defining templates
    if ($scope.myDiagram != null) {
        $scope.myDiagram.clear();
        $scope.LoadDataInFlowChart();
        return false;
    }

    //  go.licenseKey = "" 

    $scope.myDiagram = $(go.Diagram, "myDiagramDiv",
        {
            layout: $(go.LayeredDigraphLayout,
                {
                    direction: 90,
                    isOngoing: false,  // sets the postion of the node to current drag pos
                    layerSpacing: 70,
                    setsPortSpots: false,
                    columnSpacing: 50,
                    isRouting: true,
                    isValidLayout: true,
                    isViewportSized: true,
                    aggressiveOption: go.LayeredDigraphLayout.AggressiveMore,
                    cycleRemoveOption: go.LayeredDigraphLayout.CycleDepthFirst,
                    initializeOption: go.LayeredDigraphLayout.InitDepthFirstOut,
                    layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,
                    packOption: go.LayeredDigraphLayout.PackAll

                }),
            allowZoom: true,
            scale: 0.60,
            allowHorizontalScroll: true,
            //allowVerticalScroll: true,
            hoverDelay: 200,
            allowDrop: true,  // must be true to accept drops from the Palette
            "animationManager.duration": 800, // slightly longer than default (600ms) animation
            "undoManager.isEnabled": true,  // enable undo & redo
            "linkingTool.direction": go.LinkingTool.ForwardsOnly,
            "draggingTool.isGridSnapEnabled": true
        });

    $scope.myDiagram.toolManager.dragSelectingTool.box =
       $(go.Part,
         { layerName: "Tool", selectable: true },
         $(go.Shape,
           { name: "SHAPE", fill: null, stroke: "chartreuse", strokeWidth: 3 })

    );



    $scope.myDiagram.grid =
            $(go.Panel, go.Panel.Grid,  // or "Grid"
              { gridCellSize: new go.Size(35, 35) },
              $(go.Shape, "LineH", { stroke: "#e2e2e2" }),
              $(go.Shape, "LineV", { stroke: "#e2e2e2" })
            );

    

    var lightText = 'black'; //whitesmoke

    $scope.myDiagram.nodeTemplateMap.add("",
        $(go.Node, "Auto",
         { contextMenu: $(go.Adornment) },
          {
              toolTip:  // define a tooltip for each node that displays the color as text
                $(go.Adornment, "Auto",
                  $(go.Shape, { fill: "#fff7d3" }),
                  $(go.TextBlock, { margin: 4, font: "bold 9pt Helvetica, Arial, sans-serif", stroke: "black" },
                    new go.Binding("text", ""))
                )

              // end of Adornment
          },
          $(go.Shape, "RoundedRectangle",
            {
                fromLinkableDuplicates: false, toLinkableDuplicates: false,
                toMaxLinks: 1, fromLinkableSelfNode: false, toLinkableSelfNode: false, fromMaxLinks: 1,
                fill: $(go.Brush, "Linear", { 0: "#e8fff5" }),
                stroke: "#000", strokeWidth: 1
            },

             new go.Binding("stroke", "highlight", function (v) { return v ? "red" : "blue"; }),
          new go.Binding("strokeWidth", "highlight", function (v) { return v ? 3 : 1; }),
          new go.Binding("fill", "color")),
          $(go.TextBlock,
            {
                margin: 8,
                font: "bold 11pt Helvetica, Arial, sans-serif",
                stroke: lightText,
                width: 150,
                minSize: new go.Size(160, NaN),
                maxSize: new go.Size(160, NaN),
                wrap: go.TextBlock.WrapDesiredSize,
                textAlign: "center",
                row: 0, column: 0, columnSpan: 2,
            },
            new go.Binding("text", "text")
          )
        ));

    $scope.myDiagram.nodeTemplateMap.add("FunctionalLibrary",
  $(go.Node, "Auto",
   { contextMenu: $(go.Adornment) },
   {
       toolTip:  // define a tooltip for each node that displays the color as text
                 $(go.Adornment, "Auto",
                   $(go.Shape, { fill: "#fff7d3" }),
                   $(go.TextBlock, { margin: 4, font: "bold 9pt Helvetica, Arial, sans-serif", stroke: "black" },
                     new go.Binding("text", ""))
                 )
   },
    $(go.Shape, "RoundedRectangle",
      {
          fromLinkableDuplicates: false, toLinkableDuplicates: false,
          toMaxLinks: 1, fromLinkableSelfNode: false, toLinkableSelfNode: false, fromMaxLinks: 1,
          fill: $(go.Brush, "Linear", { 0: "#e59b24", 1: "#ffd084" }),
          stroke: "#000", strokeWidth: 1
      },

       new go.Binding("stroke", "highlight", function (v) { return v ? "red" : "blue"; }),
    new go.Binding("strokeWidth", "highlight", function (v) { return v ? 3 : 1; }),
    new go.Binding("fill", "color")),
    $(go.TextBlock,
      {
          margin: 8,
          font: "bold 11pt Helvetica, Arial, sans-serif",
          stroke: "black",
          width: 150,
          minSize: new go.Size(180, NaN),
          maxSize: new go.Size(180, NaN),
          wrap: go.TextBlock.WrapDesiredSize,
          textAlign: "center",
          row: 0, column: 0, columnSpan: 2,
      },
      new go.Binding("text", "text")
    )
  ));


    $scope.myDiagram.nodeTemplateMap.add("FunctionalLibraryDelete",

$(go.Node, “Auto”,
{ contextMenu: $(go.Adornment) },
{
toolTip: // define a tooltip for each node that displays the color as text
$(go.Adornment, “Auto”,
$(go.Shape, { fill: “#fff7d3” }),
$(go.TextBlock, { margin: 4, font: “bold 9pt Helvetica, Arial, sans-serif”, stroke: “black” },
new go.Binding(“text”, “”))
)
},
$(go.Shape, “RoundedRectangle”,
{
fromLinkableDuplicates: false, toLinkableDuplicates: false,
toMaxLinks: 1, fromLinkableSelfNode: false, toLinkableSelfNode: false, fromMaxLinks: 1,
fill: $(go.Brush, “Linear”, { 0: “#e59b24”, 1: “#ffd084” }),
stroke: “#000”, strokeWidth: 1
},

    new go.Binding("stroke", "highlight", function (v) { return v ? "red" : "blue"; }),
 new go.Binding("strokeWidth", "highlight", function (v) { return v ? 3 : 1; }),
 new go.Binding("fill", "color")),
 $(go.TextBlock,
   {
       margin: 8,
       font: "bold 11pt Helvetica, Arial, sans-serif",
       stroke: "red",
       width: 150,
       minSize: new go.Size(180, NaN),
       maxSize: new go.Size(180, NaN),
       wrap: go.TextBlock.WrapDesiredSize,
       textAlign: "center",
       row: 0, column: 0, columnSpan: 2,
   },
   new go.Binding("text", "text")
 )

));

    $scope.myDiagram.nodeTemplateMap.add("If",
       $(go.Node, "Auto",
        {
        },
        {
            toolTip:  // define a tooltip for each node that displays the color as text
                 $(go.Adornment, "Auto",
                   $(go.Shape, { fill: "#fff7d3" }),
                   $(go.TextBlock, { margin: 4, font: "bold 9pt Helvetica, Arial, sans-serif", stroke: "black" },
                     new go.Binding("text", ""))
                 )
        },
        { contextMenu: $(go.Adornment) },
         $(go.Shape, "Diamond",
           { minSize: new go.Size(70, 50), fill: "#20b2aa", stroke: null }
         ),
         $(go.TextBlock, "If",
           { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: "whitesmoke" },
            new go.Binding("text")
         )
       ));
    $scope.myDiagram.nodeTemplateMap.add("Yes",
     $(go.Node, "Auto",
       { contextMenu: $(go.Adornment) },
       $(go.Shape, "RoundedRectangle",
         { minSize: new go.Size(70, 40), fill: "green", stroke: null }
       ),
       $(go.TextBlock, "If",
         { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: "whitesmoke" },
          new go.Binding("text")
       )
     ));

    $scope.myDiagram.nodeTemplateMap.add("Else",
      $(go.Node, "Auto",
        { contextMenu: $(go.Adornment) },
        $(go.Shape, "RoundedRectangle",
          { minSize: new go.Size(70, 40), fill: "red", stroke: null }
        ),
        $(go.TextBlock, "If",
          { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: "whitesmoke" },
           new go.Binding("text")
        )
      ));

    $scope.myDiagram.nodeTemplateMap.add("EndIf",
     $(go.Node, "Auto",
      {
      
      },
      {
          toolTip:  // define a tooltip for each node that displays the color as text
                 $(go.Adornment, "Auto",
                   $(go.Shape, { fill: "#fff7d3" }),
                   $(go.TextBlock, { margin: 4, font: "bold 9pt Helvetica, Arial, sans-serif", stroke: "black" },
                     new go.Binding("text", ""))
                 )
      },
      { contextMenu: $(go.Adornment) },
       $(go.Shape, "Diamond",
         { minSize: new go.Size(70, 50), fill: "#20b2aa", stroke: null }
       ),
       $(go.TextBlock, "If",
         { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: "whitesmoke" },
          new go.Binding("text")
       )
       // makePort("T", go.Spot.Top, false, true),
       // makePort("L", go.Spot.Left, true, true),
       // makePort("R", go.Spot.Right, true, true),
       // makePort("B", go.Spot.Bottom, false, true)
     ));


    $scope.myDiagram.nodeTemplateMap.add("Start",
       $(go.Node, "Auto",
         $(go.Shape, "Circle",
           { minSize: new go.Size(40, 40), fill: "#90ce49", stroke: null },
             new go.Binding("stroke", "highlight", function (v) { return v ? "red" : "blue"; }),
            new go.Binding("strokeWidth", "highlight", function (v) { return v ? 3 : 1; })
         ),
         $(go.TextBlock, "Start",
           { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: "whitesmoke" },
           new go.Binding("text")
         )

       ));


    $scope.myDiagram.nodeTemplateMap.add("End",
       $(go.Node, "Auto",
        {
        },
         $(go.Shape, "Circle",
           { minSize: new go.Size(40, 40), fill: "darkred", stroke: null }
         ),
         $(go.TextBlock, "End",
           { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: "whitesmoke" },
           new go.Binding("text")
         )
       ));


    $scope.myDiagram.nodeTemplateMap.add("For",
     $(go.Node, "Spot", nodeStyle(),
       $(go.Panel, "Auto",
        { contextMenu: $(go.Adornment) },
        {
            toolTip:  // define a tooltip for each node that displays the color as text
                $(go.Adornment, "Auto",
                  $(go.Shape, { fill: "#fff7d3" }),
                  $(go.TextBlock, { margin: 4, font: "bold 9pt Helvetica, Arial, sans-serif", stroke: "black" },
                    new go.Binding("text", ""))
                )
        },
         $(go.Shape, "Circle",
           {
               minSize: new go.Size(57, 57),
               fill: "#444", stroke: null,
           }),
         $(go.TextBlock, "For",
           { font: "bold 9pt Helvetica, Arial, sans-serif", stroke: 'White', textAlign: "center" },
           new go.Binding("text"))
       )


       // three named ports, one on each side except the top, all output only:
       //makePort("T", go.Spot.Top, false, true),
       //makePort("L", go.Spot.Left, true, true),
       //makePort("R", go.Spot.Right, true, true),
       //makePort("B", go.Spot.Bottom, true, true)
     ));



    $scope.myDiagram.nodeTemplateMap.add("Next",
    $(go.Node, "Spot", nodeStyle(),
      $(go.Panel, "Auto",
       { contextMenu: $(go.Adornment) },
        {
            toolTip:  // define a tooltip for each node that displays the color as text
                 $(go.Adornment, "Auto",
                   $(go.Shape, { fill: "#fff7d3" }),
                   $(go.TextBlock, { margin: 4, font: "bold 9pt Helvetica, Arial, sans-serif", stroke: "black" },
                     new go.Binding("text", ""))
                 )
        },
        $(go.Shape, "Circle",
          {
              minSize: new go.Size(57, 57),
              fill: "#444", stroke: null,
          }),
        $(go.TextBlock, "Next",
          { font: "bold 9pt Helvetica, Arial, sans-serif", stroke: 'White', textAlign: "center" },
          new go.Binding("text"))
      )

    ));




    $scope.myDiagram.groupTemplate =

$(go.Group, “Auto”,
{
layout: $(go.TreeLayout, { comparer: go.LayoutVertex.smartComparer, layerSpacing: 50, nodeSpacing: 50 }), isSubGraphExpanded: true
},
$(go.Shape, “Rectangle”, { stroke: “#000034”, strokeWidth: 2, parameter1: 10, fill: “rgba(191,191,191,0.33)” }),
$(go.Panel, “Table”, // position header above the subgraph
{ defaultAlignment: go.Spot.Left, margin: 3.5 }, $(“SubGraphExpanderButton”, { row: 0, column: 0, margin: 2 }),
$(go.TextBlock, // title is centered in header
{
row: 0, column: 1,
font: “bold 20px Sans-Serif”,
stroke: “black”,
stretch: go.GraphObject.Horizontal,
margin: 2,
textAlign: “center”
},
new go.Binding(“text”)),
$(go.Placeholder, // becomes zero-sized when Group.isSubGraphExpanded is false
{ row: 1, columnSpan: 2, padding: 5, alignment: go.Spot.TopLeft },
new go.Binding(“padding”, “isSubGraphExpanded”,
function (exp) { return exp ? 10 : 0; }).ofObject()
)
)
);

    $scope.myDiagram.layout = $(go.LayeredDigraphLayout,
                       { direction: 90, layerSpacing: 50, isRealtime: true });

    $scope.myDiagram.initialContentAlignment = go.Spot.Center;


    $scope.myDiagram.linkTemplate =
              $(go.Link,  // the whole link panel
                {
                    routing: go.Link.AvoidsNodes,
                    curve: go.Link.JumpOver, isTreeLink: true,
                    // corner: 10,
                    toShortLength: 10,
                    //relinkableFrom: true,
                    //relinkableTo: true,
                    //reshapable: true,
                    //resegmentable: true,
                    layoutConditions: go.Part.LayoutAdded | go.Part.LayoutRemoved,
                    // mouse-overs subtly highlight links:
                    mouseEnter: function (e, link) {
                        console.log('link focus in');
                        dataFactory.customNodeObject['e'] = e;
                        dataFactory.customNodeObject['link'] = link;
                        link.findObject("HIGHLIGHT").stroke = "rgba(24,87,255,2.0)";
                        link.isHighlighted = true;

                    },
                    mouseLeave: function (e, link) {
                        console.log('link focus out');
                        dataFactory.customNodeObject = new Object();
                        link.findObject("HIGHLIGHT").stroke = "transparent"; link.isHighlighted = false;
                    },
                    //mouseHover: function (a, b) {
                    //    console.log('mouseHover');
                    //},
                    //mouseOver: function (e, link) {
                    //    var point = go.Point.parse(e.event.x + " " + e.event.y);
                    //    e.diagram.transformDocToView(point)
                    //    console.log('mouseOver');
                    //}
                },
                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: "#686464", strokeWidth: 4 }),
                $(go.Shape,  // the arrowhead
                  { toArrow: "standard", stroke: null, fill: "#686464" }),
                $(go.Panel, "Auto",  // the link label, normally not visible
                  { visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5 },
                  new go.Binding("visible", "visible").makeTwoWay(),
                  $(go.Shape, "RoundedRectangle",  // the label shape
                    { fill: "#a8a1a1", stroke: null }),
                  $(go.TextBlock, "label",  // the label is used to set the value ot textBlock
                    {
                        textAlign: "center",
                        font: "10pt helvetica, arial, sans-serif",
                        stroke: "#333333",
                        editable: true
                    },
                    new go.Binding("text").makeTwoWay())
                )
              );


    $scope.myDiagram.findLayer("Tool").opacity = 0.5;

    // disable copy paste option 
    $scope.myDiagram.allowCopy = false;

    // enable Grid pattern
    $scope.myDiagram.grid.visible = true;
    
    function nodeStyle() {
        return [
          
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          {
              
              locationSpot: go.Spot.Center,
              layoutConditions: go.Part.LayoutAdded | go.Part.LayoutRemoved,
              resizable: false,

              // resizeObjectName: "SHAPE",
              isShadowed: false,
              shadowColor: "#888",
              // handle mouse enter/leave events to show/hide the ports
           
         
          }
        ];
    }

    $scope.LoadDataInFlowChart(); // load an initial diagram from some JSON text

    $scope.myDiagram.initialContentAlignment = go.Spot.Center;

  
    var myOverview =
       $(go.Overview, "myOverviewDiv",
         { observed: $scope.myDiagram, maxScale: 0.5, contentAlignment: go.Spot.Center });
    myOverview.box.elt(0).stroke = "dodgerblue";

    

};

///- JSON

Node Array

[{“key”:10000000001,“category”:“Start”,“text”:“Start”,“eventType”:1,“eventDimension”:1,“item”:“start”},{“key”:“IfParent49298861-219b-4242-a546-2df393fe7649”,“category”:“subprocess”,“text”:“Conditional IF Block”,“item”:“generic task”,“taskType”:0,“isGroup”:true,“isSubProcess”:true,“loc”:“182.609343625 159.348916015625”,“ActionType”:“ControlFlowConstruct”},{“key”:“IfParentDiamond49298861-219b-4242-a546-2df393fe7649”,“category”:“If”,“text”:“If”,“item”:“start”,“taskType”:0,“group”:“IfParent49298861-219b-4242-a546-2df393fe7649”,“gatewayType”:4,“eventType”:1,“eventDimension”:1},{“key”:“YesNode49298861-219b-4242-a546-2df393fe7649”,“group”:“IfParent49298861-219b-4242-a546-2df393fe7649”,“category”:“Yes”,“text”:“Yes”,“item”:“start”,“taskType”:0,“gatewayType”:4},{“key”:“d5ae2c7e-bbd5-4bcd-82ee-a2b9bc3ec344”,“category”:“activity”,“ArtifactText”:“SelectCheckBox”,“text”:"SelectCheckBox ",“item”:“generic task”,“taskType”:0,“group”:“IfParent49298861-219b-4242-a546-2df393fe7649”,“GroupID”:null},{“key”:“b031f9af-a552-49af-81b5-ddf548396a7c”,“category”:“FunctionalLibrary”,“ArtifactText”:“New Node (8)”,“text”:"New Node (8) ",“item”:“generic task”,“taskType”:0,“group”:“IfParent49298861-219b-4242-a546-2df393fe7649”,“GroupID”:null},{“key”:“dd540490-79d8-4dc8-a112-ed35a415e326”,“category”:“FunctionalLibrary”,“ArtifactText”:“sss-if- Copy (1)”,“text”:"sss-if- Copy (1) ",“item”:“generic task”,“taskType”:0,“group”:“IfParent49298861-219b-4242-a546-2df393fe7649”,“GroupID”:null},{“key”:“EndIfNode5a62d56a9-1e33-4369-a7a9-a2016fed8d78”,“group”:“IfParent49298861-219b-4242-a546-2df393fe7649”,“category”:“EndIf”,“text”:“EndIf”},{“key”:“d0ef74a2-477e-444f-a88b-f7cea6f4e8ca”,“category”:“activity”,“ArtifactText”:“Click”,“text”:"Click ",“item”:“generic task”,“taskType”:0,“GroupID”:null},{“key”:“IfParent52ff42e7-e404-4ce1-97e4-c5e5eb0609c5”,“category”:“subprocess”,“text”:“Conditional IF Block”,“item”:“generic task”,“taskType”:0,“isGroup”:true,“isSubProcess”:true,“loc”:“182.609343625 159.348916015625”,“ActionType”:“ControlFlowConstruct”},{“key”:“IfParentDiamond52ff42e7-e404-4ce1-97e4-c5e5eb0609c5”,“category”:“If”,“text”:“If”,“item”:“start”,“taskType”:0,“group”:“IfParent52ff42e7-e404-4ce1-97e4-c5e5eb0609c5”,“gatewayType”:4,“eventType”:1,“eventDimension”:1},{“key”:“YesNode52ff42e7-e404-4ce1-97e4-c5e5eb0609c5”,“group”:“IfParent52ff42e7-e404-4ce1-97e4-c5e5eb0609c5”,“category”:“Yes”,“text”:“Yes”,“item”:“start”,“taskType”:0,“gatewayType”:4},{“key”:“e2e63de6-b3b4-4983-96c0-eb2061a0cc1d”,“category”:“activity”,“ArtifactText”:“Click”,“text”:"Click ",“item”:“generic task”,“taskType”:0,“group”:“IfParent52ff42e7-e404-4ce1-97e4-c5e5eb0609c5”,“GroupID”:null},{“key”:“1b574572-84ba-4188-983c-7d7ff62cd2b0”,“category”:“activity”,“ArtifactText”:“OpenBrowser”,“text”:"OpenBrowser ",“item”:“generic task”,“taskType”:0,“group”:“IfParent52ff42e7-e404-4ce1-97e4-c5e5eb0609c5”,“GroupID”:null},{“key”:“451e48e7-ceed-4799-bb0d-e1c15eac4410”,“category”:“activity”,“ArtifactText”:“OpenBrowser”,“text”:"OpenBrowser ",“item”:“generic task”,“taskType”:0,“group”:“IfParent52ff42e7-e404-4ce1-97e4-c5e5eb0609c5”,“GroupID”:null},{“key”:1015,“category”:“Else”,“text”:“No”,“item”:“start”,“taskType”:0,“gatewayType”:4,“eventType”:1,“eventDimension”:1,“group”:“IfParent52ff42e7-e404-4ce1-97e4-c5e5eb0609c5”},{“key”:“86ce61cf-19d5-44b7-86d4-9b6d423bf974”,“category”:“activity”,“ArtifactText”:“SelectCheckBox”,“text”:"SelectCheckBox ",“item”:“generic task”,“taskType”:0,“group”:“IfParent52ff42e7-e404-4ce1-97e4-c5e5eb0609c5”,“GroupID”:null},{“key”:“1a6862bc-c10e-4f64-8717-b724ea779eab”,“category”:“activity”,“ArtifactText”:“SelectRadioButton”,“text”:"SelectRadioButton ",“item”:“generic task”,“taskType”:0,“group”:“IfParent52ff42e7-e404-4ce1-97e4-c5e5eb0609c5”,“GroupID”:null},{“key”:“11880c1b-a34f-4a22-bca9-29f82496a71e”,“category”:“activity”,“ArtifactText”:“SelectRadioButton”,“text”:"SelectRadioButton ",“item”:“generic task”,“taskType”:0,“group”:“IfParent52ff42e7-e404-4ce1-97e4-c5e5eb0609c5”,“GroupID”:null},{“key”:“EndIfNode15d4c129cd-f88a-4e4c-8d25-2c753f9cd54b”,“group”:“IfParent52ff42e7-e404-4ce1-97e4-c5e5eb0609c5”,“category”:“EndIf”,“text”:“EndIf”},{“key”:“2b307dac-a442-46c8-bf6c-e25517297ef0”,“category”:“activity”,“ArtifactText”:“OpenBrowser”,“text”:"OpenBrowser ",“item”:“generic task”,“taskType”:0,“GroupID”:null},{“key”:“15450955-dd23-4298-9f4d-33f992effe35”,“category”:“activity”,“ArtifactText”:“OpenBrowser”,“text”:"OpenBrowser ",“item”:“generic task”,“taskType”:0,“GroupID”:null},{“key”:“e48e6456-316e-4da8-b56c-57a7cac19cd2”,“category”:“FunctionalLibrary”,“ArtifactText”:“jjh”,“text”:"jjh ",“item”:“generic task”,“taskType”:0,“GroupID”:null},{“key”:10000000009,“category”:“End”,“text”:“End”,“eventType”:1,“eventDimension”:1,“item”:“start”}]

Link Array

[{“from”:10000000001,“to”:“IfParent49298861-219b-4242-a546-2df393fe7649”},{“from”:“IfParentDiamond49298861-219b-4242-a546-2df393fe7649”,“to”:“YesNode49298861-219b-4242-a546-2df393fe7649”},{“from”:“YesNode49298861-219b-4242-a546-2df393fe7649”,“to”:“d5ae2c7e-bbd5-4bcd-82ee-a2b9bc3ec344”},{“from”:“d5ae2c7e-bbd5-4bcd-82ee-a2b9bc3ec344”,“to”:“b031f9af-a552-49af-81b5-ddf548396a7c”},{“from”:“b031f9af-a552-49af-81b5-ddf548396a7c”,“to”:“dd540490-79d8-4dc8-a112-ed35a415e326”},{“to”:“EndIfNode5a62d56a9-1e33-4369-a7a9-a2016fed8d78”},{“from”:“dd540490-79d8-4dc8-a112-ed35a415e326”,“to”:“EndIfNode5a62d56a9-1e33-4369-a7a9-a2016fed8d78”,“fromPort”:“R”,“toPort”:“B”},{“from”:“IfParent49298861-219b-4242-a546-2df393fe7649”,“to”:“d0ef74a2-477e-444f-a88b-f7cea6f4e8ca”},{“from”:“d0ef74a2-477e-444f-a88b-f7cea6f4e8ca”,“to”:“IfParent52ff42e7-e404-4ce1-97e4-c5e5eb0609c5”},{“from”:“IfParentDiamond52ff42e7-e404-4ce1-97e4-c5e5eb0609c5”,“to”:“YesNode52ff42e7-e404-4ce1-97e4-c5e5eb0609c5”},{“from”:“YesNode52ff42e7-e404-4ce1-97e4-c5e5eb0609c5”,“to”:“e2e63de6-b3b4-4983-96c0-eb2061a0cc1d”},{“from”:“e2e63de6-b3b4-4983-96c0-eb2061a0cc1d”,“to”:“1b574572-84ba-4188-983c-7d7ff62cd2b0”},{“from”:“1b574572-84ba-4188-983c-7d7ff62cd2b0”,“to”:“451e48e7-ceed-4799-bb0d-e1c15eac4410”},{“from”:“IfParentDiamond52ff42e7-e404-4ce1-97e4-c5e5eb0609c5”,“to”:1015},{“from”:1015,“to”:“86ce61cf-19d5-44b7-86d4-9b6d423bf974”},{“from”:“86ce61cf-19d5-44b7-86d4-9b6d423bf974”,“to”:“1a6862bc-c10e-4f64-8717-b724ea779eab”},{“from”:“1a6862bc-c10e-4f64-8717-b724ea779eab”,“to”:“11880c1b-a34f-4a22-bca9-29f82496a71e”},{“from”:“451e48e7-ceed-4799-bb0d-e1c15eac4410”,“to”:“EndIfNode15d4c129cd-f88a-4e4c-8d25-2c753f9cd54b”},{“from”:“11880c1b-a34f-4a22-bca9-29f82496a71e”,“to”:“EndIfNode15d4c129cd-f88a-4e4c-8d25-2c753f9cd54b”,“fromPort”:“R”,“toPort”:“B”},{“from”:“IfParent52ff42e7-e404-4ce1-97e4-c5e5eb0609c5”,“to”:“2b307dac-a442-46c8-bf6c-e25517297ef0”},{“from”:“2b307dac-a442-46c8-bf6c-e25517297ef0”,“to”:“15450955-dd23-4298-9f4d-33f992effe35”},{“from”:“15450955-dd23-4298-9f4d-33f992effe35”,“to”:“e48e6456-316e-4da8-b56c-57a7cac19cd2”},{“from”:“e48e6456-316e-4da8-b56c-57a7cac19cd2”,“to”:10000000009}]

Thanks for providing a reproducible sample. We’ll investigate it on Monday.

In the meantime you could try the 1.8.22 beta library that is at GoJS - Build Interactive Diagrams for the Web. I suggest you just grab the release/go-debug.js file from the release subdirectory there.

Also, could you try setting Group.computesBoundsIncludingLinks to false?

        $(go.Group, "Auto",
          {
            computesBoundsIncludingLinks: false,

With the new library and this Group property setting, everything seems to work OK for me.

Some comments on unrelated issues:

  • You aren’t using separate ports, so you don’t need to set GraphLinksModel.linkFromPortIdProperty or GraphLinksModel.linkToPortIdProperty. But maybe you’ve cut down the sample for me by simplifying the nodes not to have separate ports. The link data don’t use those two properties, so you don’t need to set those two model properties.
  • The contextMenu are empty. Again, maybe you cut down the sample for my benefit.
  • Perhaps you could share the contextMenu and the toolTip amongst the different node templates.
  • You set a lot of properties to their default values. That’s not necessary, and would simplify the code a bit if you removed those settings.

Thanks a lot walter for reply

Updated my library to 1.8.22 (go-debug.js)
set property computesBoundsIncludingLinks: false,

Still same error :(

Yes i have cut it down lots of context menu code to provide you this sample

OK, I tried your code again, with a few changes just to accommodate running in a stand-alone HTML page (removing $scope, commenting out dataFactory, changing how the diagram is initialized, making use of the 1.8.22 library).

Everything worked – no links were left appearing disconnected after collapsing or expanding the groups.

To make the collapse/expand animation smoother, I then set Group.computesBoundsIncludingLinks to false. But doing that wasn’t even necessary.

You can see my version of your code at Page Not Found -- Northwoods Software.