Drag child nodes alongside parent node

[Bassel Elwakil]

Hello, I wanted to ask if there is a way to group the nodes to be dragged together if a node is a child of another node, meaning when I drag the parent, it's children moves with them, thank you

[Aravind Ravi]

Hi Bassel 

 

We have created a sample to move the child nodes along with parent nodes while dragging the parent node. When we click any nodes in the diagram, click event gets triggered. In that event, through the diagram selectedItems we can get the selected node. 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. After get the child nodes, you can select all the child nodes and parent nodes using the select public API method. After select when you drag, the child nodes dragged alongside with parent node.  Please refer to the below code snippet.   

 

public click(args: IClickEventArgs) { 

    if (args.element instanceof Node) { 

      let childNodes: NodeModel[] = []; 

// Get the child nodes connected to parent node 

      childNodes = this.NodeReachable(); 

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

// Select all the child nodes and parent node 

      this.diagram.select(childNodes); 

    } 

  } 

 

  public NodeReachable(): NodeModel[] { 

    let nodes: NodeModel[] = []; 

    if (this.diagram.selectedItems.nodes.length) { 

// Get the connectors connected to parent node 

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

        .outEdges; 

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

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

        let connector: ConnectorModel = this.diagram.getObject( 

          connectorList[i] 

        ); 

// Get the child node and push it to collection 

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

        nodes.push(node); 

      } 

    } 

    return nodes; 

  } 

 

We have attached a sample for your reference. Please find the sample in the below link 

 

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

 

Regards 

Aravind Ravi