When I drag items into canvas node the connectors don't follow correctly

[Geoff]

Hi, I am trying to create a simple container node for a diagram.  So, when you drag items into it, they move with the container, and when you drag out again they don't.

I just created a node of type canvas and set the AllowDrop constraint.   The nodes behave roughly as expected, but not the connectors.

here is a video of the problem
here is a stackblitz or where what I have done

Am I attempting this in a sensible way?

Many thanks, 
G

[Aravind Ravi]

Hi Geoff,

We have modified the sample to add node as a child node to other node. Instead of add node as canvas, you can add a group and set children to the group node. Group is used to cluster multiple nodes and connectors into a single element. It acts like a container for its children (nodes, groups, and connectors). Every change made to the group also affects the children. Child elements can be edited individually. Whenever you drag and drop nodes on other node if that node has AllowDrop constraint, drop event gets triggered. In that drop event through target argument you can get the target node and through element argument you can get the node which is dropped. After get the node, you can create a new node as group and push the dropped element and target node as a children to the group node. So that when you drag the parent node, all child nodes gets dragged inside parent node. Please refer to the below code snippet and sample

public drop(args: IDropEventArgs) {

    if (args.target instanceof Node) {

      let targetNode: NodeModel = args.target;

// Create new group node

      let newNode: NodeModel = {

        id: 'group',

        children: [],

      };

// Push the target node in group children collection

      newNode.children.push(targetNode.id);

      if (args.element.nodes && args.element.nodes.length > 0) {

        for (let i: number = 0; i < args.element.nodes.length; i++) {

// Push the source node in group children collection

          newNode.children.push(args.element.nodes[i].id);

        }

      }

      if (args.element.connectors && args.element.connectors.length > 0) {

        for (let i: number = 0; i < args.element.connectors.length; i++) {

// Push the source node in group children collection

          newNode.children.push(args.element.connectors[i].id);

        }

      }

      targetNode.constraints = NodeConstraints.Default;

// Add group node in diagram

      this.diagram.add(newNode);

    }

  }

Sample: https://stackblitz.com/edit/angular-q5mkvm?file=src%2Fapp%2Fapp.component.ts

We have attached a video demonstration of how we group the node together. Please find the video in the below link

Video: https://www.syncfusion.com/downloads/support/forum/175453/ze/Group-435000710

For more information about how to add group node, please refer to the below UG link

UG Link: https://ej2.syncfusion.com/angular/documentation/diagram/group/

Regards

Aravind Ravi