Chart distorted after adding a node in subgroup

GoJS
1

Whenever i add any node in any subgroup my flow chart links get distorted.Please check snapshots and arrays

gojs-gif-001.gif1080×720 2.22 MB

----- Node Data Array ----

{key: 10000000001, category: “Start”, text: “Start”, eventType: 1, eventDimension: 1, …}
{key: 1, category: “activity”, text: “OpenBrowser”, item: “generic task”, taskType: 0, …}
{key: 2, category: “activity”, text: “SyncBrowser”, item: “generic task”, taskType: 0, …}
{key: 3, category: “activity”, text: “SyncBrowser”, item: “generic task”, taskType: 0, …}
{key: 4, category: “subprocess”, text: “If/EndIf Block”, item: “generic task”, taskType: 0, …}
{key: 1004, category: “If”, text: “If”, item: “start”, taskType: 0, …}
{key: 5, category: “activity”, text: “SyncBrowser”, item: “generic task”, taskType: 0, …}
{key: 6, category: “activity”, text: “SyncBrowser”, item: “generic task”, taskType: 0, …}
{key: 7, category: “activity”, text: “SyncBrowser”, item: “generic task”, taskType: 0, …}
{key: 8, category: “activity”, text: “SyncBrowser”, item: “generic task”, taskType: 0, …}
{key: 9, category: “activity”, text: “SyncBrowser”, item: “generic task”, taskType: 0, …}
{key: 10, category: “subprocess”, text: “If/EndIf Block”, item: “generic task”, taskType: 0, …}
{key: 1010, category: “If”, text: “If”, item: “start”, taskType: 0, …}
{key: 11, category: “activity”, text: “AcceptPopup”, item: “generic task”, taskType: 0, …}
{key: 12, category: “activity”, text: “SyncBrowser”, item: “generic task”, taskType: 0, …}
{key: 13, category: “activity”, text: “AcceptPopup”, item: “generic task”, taskType: 0, …}
{key: 14, category: “activity”, text: “AcceptPopup”, item: “generic task”, taskType: 0, …}
{key: 15, category: “activity”, text: “AcceptPopup”, item: “generic task”, taskType: 0, …}
{key: 16, category: “activity”, text: “SyncBrowser”, item: “generic task”, taskType: 0, …}
{key: 17, category: “activity”, text: “SyncBrowser”, item: “generic task”, taskType: 0, …}
{key: 1022, category: “Else”, text: “Else”, item: “start”, taskType: 0, …}
{key: 19, category: “activity”, text: “SyncBrowser”, item: “generic task”, taskType: 0, …}
{key: 20, category: “activity”, text: “SyncBrowser”, item: “generic task”, taskType: 0, …}
{key: 21, category: “activity”, text: “AcceptPopup”, item: “generic task”, taskType: 0, …}
{key: 22, category: “activity”, text: “SyncBrowser”, item: “generic task”, taskType: 0, …}
{key: 24, category: “activity”, text: “SyncBrowser”, item: “generic task”, taskType: 0, …}
{key: 25, category: “activity”, text: “SyncBrowser”, item: “generic task”, taskType: 0, …}
{key: 1030, category: “Else”, text: “Else”, item: “start”, taskType: 0, …}
{key: 28, category: “activity”, text: “Click”, item: “generic task”, taskType: 0, …}
{key: 29, category: “activity”, text: “SyncBrowser”, item: “generic task”, taskType: 0, …}
{key: 30, category: “activity”, text: “SyncBrowser”, item: “generic task”, taskType: 0, …}
{key: 10000000009, category: “End”, text: “End”, eventType: 1, eventDimension: 1, …}

----Link Data Array

{from: 10000000001, to: 1, __gohashid: 66186, points: J}
{from: 1, to: 2, __gohashid: 66187, points: J}
{from: 2, to: 3, __gohashid: 66188, points: J}
{from: 3, to: 4, __gohashid: 66189, points: J}
{from: 1004, to: 5, fromPort: “T”, toPort: “L”, __gohashid: 66190, …}
{from: 5, to: 6, __gohashid: 66191, points: J}
{from: 6, to: 7, __gohashid: 66192, points: J}
{from: 7, to: 8, __gohashid: 66193, points: J}
{from: 8, to: 9, __gohashid: 66194, points: J}
{from: 9, to: 10, __gohashid: 66195, points: J}
{from: 1010, to: 11, fromPort: “T”, toPort: “L”, __gohashid: 66196, …}
{from: 11, to: 12, __gohashid: 66197, points: J}
{from: 12, to: 13, __gohashid: 66198, points: J}
{from: 13, to: 14, __gohashid: 66199, points: J}
{from: 14, to: 15, __gohashid: 66200, points: J}
{from: 15, to: 16, __gohashid: 66201, points: J}
{from: 16, to: 17, __gohashid: 66202, points: J}
{from: 1010, to: 1022, fromPort: “T”, toPort: “B”, __gohashid: 66203, …}
{from: 1022, to: 19, __gohashid: 66204, points: J}
{from: 19, to: 20, __gohashid: 66205, points: J}
{from: 20, to: 21, __gohashid: 66206, points: J}
{from: 21, to: 22, __gohashid: 66207, points: J}
{from: 10, to: 24, __gohashid: 66208, points: J}
{from: 24, to: 25, __gohashid: 66209, points: J}
{from: 1004, to: 1030, fromPort: “T”, toPort: “B”, __gohashid: 66210, …}
{from: 4, to: 28, __gohashid: 66211, points: J}
{from: 28, to: 29, __gohashid: 66212, points: J}
{from: 29, to: 30, __gohashid: 66213, points: J}
{from: 30, to: 10000000009, __gohashid: 66214, points: J}

2

It isn’t clear to me what happens when the user drops the node. Do you create some new nodes and add several new links?

What is the Diagram.layout? What is the Group.layout?

Do those links have AvoidsNodes routing? If so, and if you want links between member nodes of different groups or with top-level nodes, have you set Group.avoidable to false?

3

No we dont create any new nodes or any their link.We just simply drag and drop a node into existing links

Diagram.layout : go.LayeredDigraphLayout
Group.layout : go.LayeredDigraphLayout

yes we have set AvoidsNodes routing (routing: go.Link.AvoidsNodes,) also set Group.avoidable to false but Still the same result

4

Ok, another question is what behavior are you expecting when you drop a node on a link, as that will affect how nodes and links behave after the drop. Do you want a link going to and from the dropped node as in the flowgrammer sample?

5

Please see below image

gojs-ticket-gif.gif952×750 2.37 MB

On adding nodes one by one my nodes links getting disturbed.

6

A layout is performed each time you add or remove a node.

7

Ok , so do we have any solution for this ?

8

As you are adding nodes you are expecting a layout to happen so that the node is positioned appropriately relative to all of the other nodes. All of the links need to be rerouted as well in order to adapt to the new node positions.

The layout might not be doing an optimal routing, so you could try changing some of the properties or overriding methods to see if you can improve the layout results. But this can be complicated to do.