Diagram container drag and drop position for children

Question

create a container by using Diagram Node and  Drag and drop a Diagram Shape into the container, but  cannot set right position and dimension for children item on container, dimension of container as well, it is like this
================

if (diagram.selectedItems.nodes.length)
{
let vtx = diagram.selectedItems.nodes[0].offsetX;
let vty = diagram.selectedItems.nodes[0].offsetY;
let mnc= diagram.selectedItems.nodes[0].properties.addInfo[0].menuId;
let diagramData=JSON.parse(document.getElementById('diagram').ej2_instances[0].saveDiagram());
let counti=0;

for(let i=0; i<=diagramData.nodes.length-1; i++)
{
if(diagram.selectedItems.nodes[0].properties.id===diagramData.nodes[i].id)
{
if(diagram.selectedItems.nodes[0].properties.constraints===diagramData.nodes[i].constraints)
{
counti=i;
}
}
}

let vcw=0;
let vch=0;
let ofx=0;
let ofy=0;
let croj=[];

let diagramElement;
for(let i=0; i<=diagramData.nodes.length-1; i++)
{

vcw=diagramData.nodes[i].width;
vch=diagramData.nodes[i].height;
ofx=diagramData.nodes[i].offsetX;
ofy=diagramData.nodes[i].offsetY;
if((ofx-vcw/2 < vtx) && (vtx < ofx+vcw/2) && (ofy-vch/2 < vty) && (vty < ofy+vch/2) && ((ofx!=vtx)||(ofy!=vty)))
{

if (hople(diagramData.nodes[i].addInfo[0].menuId,mnc)==1)
{
if(typeof(diagramData.nodes[i].children)=="undefined")
{
diagramData.nodes[counti].width=50;
diagramData.nodes[counti].height=50;
diagramData.nodes[counti].offsetX=0;
diagramData.nodes[counti].offsetY=0;
croj.push(diagramData.nodes[counti].id);
//diagramData.nodes[i].width=400;
//diagramData.nodes[i].height=150;
diagramData.nodes[i].children=croj;
//diagramData.nodes[i].style.fill="#6BA5D7";
}
else
{
alert(diagramData.nodes[i].children.length);
diagramData.nodes[counti].width=50;
diagramData.nodes[counti].height=50;
diagramData.nodes[counti].offsetX=-30+diagramData.nodes[counti].width*diagramData.nodes[i].children.length;
diagramData.nodes[counti].offsetY=0;
//diagramData.nodes[counti].marginTop=10;
//diagramData.nodes[counti].marginLeft=10;
//diagramData.nodes[counti].style.fill="#6BA5D7";
//let croj=[];
//croj.push(diagramData.nodes[counti].id);
//alert(diagramData.nodes[counti].id);
diagramData.nodes[i].width=diagramData.nodes[counti].width*(diagramData.nodes[i].children.length+2);
//diagramData.nodes[i].height=150;
alert(diagramData.nodes[i].width);
diagramData.nodes[i].children.push(diagramData.nodes[counti].id);
//diagramData.nodes[i].style.fill="#6BA5D7";
}

diagramElement= document.getElementById('diagram').ej2_instances[0];
diagramElement.clear();
if (diagramData === '')
{
diagramData = JSON.parse(diagramElement.saveDiagram());
}
diagramElement.isLoading = true;
diagramElement.loadDiagram(JSON.stringify(diagramData));
diagramElement.clearSelection();
diagramElement.isLoading = false;

}

}
}
}Attachment: containerimage_a4030550.zip

Arunkumar Manoharan · Answer

Hi
Volvick,On
further analysis of shared image, we found that you are using group nodes. In
group, when you update the child offset, the group node will be updated based
on it. This is the diagram default behavior. We have created a sample in which
we have updated the group child dimension at button click. For more info,
please refer to the below code snippet and sample link below.Code snippet:

document.getElementById('change').onclick
  = function () {
    if (diagram.selectedItems.nodes.length) {
      diagram.nodes[0].offsetX = 700;
    }
  };

Sample Link: https://stackblitz.com/edit/k4dtps-zgh7we?file=index.ts
Regards,Arun Kumar.