Links rerouting when node textblock is edited

GoJS
1

Hi iam using Gojs for generating flowcharts. I am having a trouble with links. While editing a node’s textblock the links that are connected between the nodes are shrinking .
Pls see attached screenshot :

  1. My original structure :

  1. After I edit the text in the first node

This happens even when dragging the nodes .
This is my link template
myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{

      routing: go.Link.AvoidsNodes,
      curve: go.Link.JumpOver,
      corner: 5, toShortLength: 4,
      relinkableFrom: true,
      relinkableTo: true,
      reshapable: true,
      resegmentable: false,
      // mouse-overs subtly highlight links:
      mouseEnter: function(e, link) { link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)"; },
      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 }),
    $(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())
    )
  );

Please help . Thanks in advance

2

Yes, when a Node changes size or position, all connected Links need to be re-routed in order to maintain the “connected” appearance.

In this case the selected link gets its default routing. You could try setting Link.adjusting to go.Link.End. However please note that with Links that have AvoidsNodes routing the intermediate points of the route may be lost anyway. It depends a lot on the situation.

3

Hi walter thanks for replying. However i tried using go.Link.End but doesn’t do any good. I face this problem even when editing test inside textBlock .My Rectangle and textblock size are fixed. There is no change in position/size when am editing a text right? Correct me if am wrong.
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, “Rectangle”,
{ fill: “#00A9C9”, stroke: null ,width: 150, height: 60},
new go.Binding(“figure”, “figure”)),

  $(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: 2, rowSpan:3 , columnSpan:5, alignment: go.Spot.Center,
          font: "bold 11pt Helvetica, Arial, sans-serif",
          stroke: lightText,
          wrap: go.TextBlock.WrapFit,
          textAlign: "center",
          editable: true,
          width:110,
          height:30
        },
        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:
    )

)

  );
4

I just checked – it’s the AvoidsNodes routing (Link.routing value) that means that kind of routing takes precedence over the Link.adjusting value.

So here’s what I suggest: leave Link.routing == go.Link.AvoidsNodes initially, so that you get that routing behavior normally, and add Link.adjusting == go.Link.End, so that users keep what they want after reshaping.

And implement a “LinkReshaped” DiagramEvent listener that changes the Link.routing from AvoidsNodes to Orthogonal. That way once the user has manually reshaped the route of a Link, the Link will maintain that route except at the ends of the route.

In your Diagram initialization using GraphObject.make you could add this line:

    "LinkReshaped": function(e) { e.subject.routing = go.Link.Orthogonal; },
5

Hey Walter . This solution works after i have reshaped the link . But the underlying problem for me is when i edit the text or move a node the links reroute. So initially i load the diagram with a predefined JSON from the user. Now when i need to change the text or drag a node the link reroutes . The user must be able to change node’s position or edit text without causing any change to the existing links. So how do i solve this??

6

So when the user moves a node, you do not want the links connecting with that node to get new routes so that they continue to appear connected with that node? In other words there would be an arbitrarily large gap between a node and its links.

That is a highly unusual request. If you are sure that is what you want, I can examine the possibilities. If that is not what you really want, please describe the behavior in more detail.

7

No , I want the node to be connected to its links.

Ok let me explain in detail

I load a chart from a JSON. The chart has 4 nodes as shown . The nodes are connected accordingly.

My routing is AvoidsNodes
My adjusting is Link.End

Now when I edit the text in the first Node (Step1 to text changed)the link shrinks .

i would like the link to be like this

As u suggested making routing orthogonal and using link.End on LinkReshaped event solves the problem. But this can be triggered only on linkreshape event . This does not happen during initial loading of the chart from JSON and any other events. I need this behaviour to be followed on all actions performed in the chart.

To enable this for all actions in the chart as well as while loading it initailly i need to Set Link.routing to orthogonal in Link template Definition . Is there anyway where I want the routing to be AvoidsNodes and the links must not shrink( I want it to function like Link.End ) during editing text/moving nodes etc .

Another question : how are the points calculated in the LinkDataArray , What does this represent
“points”:[127.10287475585938,184.19999980926514,117.10287475585938,184.19999980926514,115.10287475585938,184.19999980926514,115.10287475585938,147.19999980926514,115.10287475585938,110.19999980926514,125.10287475585938,110.19999980926514]},

8

Sounds like you just need to remember in the model for each link whether it had been reshaped. Use a TwoWay Binding for that, on Link.routing.

9

Thanks Walter . Il look into it . Regarding my other question can u tell me how the points are calculated ?

10

Are you asking about all of the ways that links get routed? That’s a big topic. I guess there are at least three ways:

  • Links route themselves based on their properties and the properties of the ports that they connect with.
  • Some Layouts route links and have some ways of controlling that behavior.
  • Users can manually change link routes via the LinkReshapingTool.

General discussion about the first way is at GoJS Links -- Northwoods Software and GoJS Link Connection Points on Nodes -- Northwoods Software.

In version 1.6 a number of overridable methods on the Link class have been documented, although they (mostly) have been there forever and are only now being documented. A number of samples define custom Link classes in order to override those methods. Search for calls to go.Diagram.inherit(..., go.Link);