Query regarding rearranging the nodes in angular diagram

[Rohit Swarup]

We have initially added 4 default nodes, we have set the fixed position for them which can be changed later (refer 1-default_state.png), and then we are adding some nodes manually in the canvas area. We are adding connectors between some nodes and some nodes doesn't have any connector. So after rearranging the nodes, only those nodes are getting rearranged those are connected. For rearranging the nodes, we have used ComplexHierarchicalTree layout type with TopToBottom orientation. In this scenario, the position of the nodes which are not connected is not getting changed after rearrange, and hence the rearranged nodes are getting overlapped with those unconnected nodes.(refer 2-overlapping_problem_after_rearranged.png)

So we want to position those unconnected nodes at the bottom of rearranged layout 

(refer 3 expected_output_after_rearranged.png). To achieve this, we require

1. Height of rearranged diagram layout (please refer 'calculate height of layout highlighted with black border.png') or

2. The bottom most node position of the layout.

Four default nodes - Initial, Fixit, Success, Failure

Later added nodes - Node1, Node2

PFA attached code for loading default nodes and rearrange code

Attachment: references_ca68173c.zip

[Aravind Ravi]

Hi Rohit, 

We have created a sample to get the bounds of the layout. By using the node’s inEdges and outEdges property we can able to find the connectors connected to a particular node. In the node’s inEdges and outEdges property we can get the connector’s ID.  Through node’s outEdges property we can find what are the connectors going out from nodes. After getting the ID by using the diagram getObject method, we can able to get the connector.   

After getting the connector from node outEdges & inEdges property, we can able to find the child and parent nodes of the selected node through connector targetID & sourceID property. In the connector targetID property we can get the child node id, after getting the child node id, through the diagram getObject method get the child node. Similarly using the connector sourceID we can get the parent node id.  Please refer to the below code snippet.   

public GetBounds() { 

    let nodes: NodeModel[] = this.NodeReachable(); 

    nodes.push(this.diagram.nodes[0]); 

    this.diagram.select(nodes); 

    let bounds: Rect = this.diagram.selectedItems.wrapper.bounds; 

    this.diagram.clearSelection(); 

    console.log('Layout Height: ' + bounds.height); 

    console.log('Layout Width: ' + bounds.width); 

  } 

  public NodeReachable(): NodeModel[] { 

    let connectors: string[] = (this.diagram.nodes[0] as Node).outEdges; 

    let nodes: NodeModel[] = []; 

    let connectorList: string[] = this.foundConnectors(connectors, []); 

    for (let i: number = 0; i < connectorList.length; i++) { 

      let connector: ConnectorModel = this.diagram.getObject(connectorList[i]); 

      let node: NodeModel = this.diagram.getObject(connector.targetID); 

      nodes.push(node); 

    } 

    return nodes; 

  } 

  public foundConnectors(list: string[], nodeList: string[]): string[] { 

    for (let i: number = 0; i < list.length; i++) { 

      let connector: ConnectorModel = this.diagram.nameTable[list[i]]; 

      if (nodeList.indexOf(connector.id) > -1) { 

        break; 

      } 

      if (this.diagram.nameTable[connector.targetID].outEdges.length) { 

        if (list.indexOf(connector.targetID) === -1) { 

          this.foundConnectors( 

            this.diagram.nameTable[connector.targetID].outEdges, 

            nodeList 

          ); 

        } 

      } 

      nodeList.push(connector.id); 

    } 

    return nodeList; 

  } 

In the sample we have get the bounds of the layout in the button click. Please find the sample in below link 

Sample: https://stackblitz.com/edit/angular-t8ufuk?file=app.component.ts 

Regards 

Aravind Ravi