Can't move node after adding child to it

Question

HelloI make application that uses syncfusion diagram. I have my own classes that implement NodeModel interface.I have problem while adding child to node. After that I'm not able to move neither parent node nor child node.Proof of code: https://stackblitz.com/edit/angular-5wk9p1-treoleThank you for helpJan Jakubowski

Aravind Ravi · Accepted Answer

Hi Jan, 

We have created a sample to add text node over normal node. As we said earlier, we cannot able to add a child to the normal node. After you add a normal node in the diagram, add the Text node in the same position. So both nodes are independent and text node gets rendered over the normal node. 

We have attached a sample for your reference. Please find the sample in below link 

Sample: https://stackblitz.com/edit/angular-5wk9p1-igtygw 

Regards 
Aravind Ravi

Aravind Ravi · Answer

Hi Jan, 

We are able to reproduce the reported issue at our end. We are validating the issue and update you with more details on June 17th 2020. 

Regards 
Aravind Ravi

Aravind Ravi · Answer

Hi Jan, 

Due to complexity of issue we are still validating the issue. We will update the details within one business day on June 18th 2020. 

Regards 
Aravind R

Aravind Ravi · Answer

Hi Jan,    
          
Thanks for your patience.  
 
Reported Issue : Cannot move group node after adding child to it. 
  
We can reproduce the issue and confirmed this as a defect. We have logged a defect report for this issue. We will fix this issue and provide the patch on July 6th weekly patch release.    
 
https://www.syncfusion.com/feedback/15412/cannot-move-group-node-after-adding-child-to-it 
  
Regards,    
Aravind Ravi

Aravind Ravi · Answer

Hi Jan,  
    
We have fixed the reported issue and included it in our 2020 Vol 2 Main release (v18.2.44 Main ) which is rolled out successfully.   
   
Please upgrade to the latest version packages to resolve this issue.         
https://www.npmjs.com/package/@syncfusion/ej2-diagrams     

On Further analysis, in the sample you have added the children to the normal node. So please add any new child to the group node instead of normal node and call addChildToGroup public API method instead of addChild method. In the latest version we have marked addChild as private method. 

Regards,  
Aravind Ravi

Jan Jakubowski · Answer

Hi,Thank you for update. Unfortunately, it doesn't seem to work. I've updated to the 18.2.44 and replaced addChild with addChildToGroup but problem still appears.Here's updated stackblitz that shows problem:https://stackblitz.com/edit/angular-5wk9p1-qrmu5xThank youJan Jakubowski

Aravind Ravi · Answer

Hi Jan, 

We have modified a sample to add children for the group node. As we said earlier, add new child to the group node. In the provided sample you have added a new node as a child to the another node. So please add new node to the group node. Please refer below code example and sample below 





const a = new SchemaFigureSyncfusion(); 
    a.id = uuidv4(); 
    a.width = 160; 
    a.height = 160; 
    a.offsetX = 10; 
    a.offsetY = 10; 
// Set children as an empty collection to the node 
    a.children = []; 

    const t = new TextFigure('Some text', uuidv4()); 

    this.diagram.add(a); 
    this.diagram.addChildToGroup(a, t); 

Sample: https://stackblitz.com/edit/angular-5wk9p1-kd5kxy 

Regards 
Aravind Ravi

Jan Jakubowski · Answer

Hi,Thank you for replay but that's not really solving my problem. I want to add child to canvas more than just group it. In my case parent is not just grouping some independent objects - it's more like the parent is itself independent object with certain width and height that does not depend on it's children. Children are more like visual elements glued to it. That's why I'm setting canvas as you can see in my implementation of NodeModel. I see it's causing problems but I don't understand why is that because I was following documentation and expecting it to work as described in it.Thank youJan Jakubowski

Aravind Ravi · Answer

Hi Jan, 

Could you please confirm us that you want to add text to the node. If so, then by using the addLabels diagram public API method we can able to add annotations to the node. Please find the below code snippet for how to add labels in the node. 





addNode() { 
    // Problematic container 
    const a = new SchemaFigureSyncfusion(); 
    a.id = uuidv4(); 
    a.width = 160; 
    a.height = 160; 
    a.offsetX = 10; 
    a.offsetY = 10; 
     

    var t = [{content: 'Text'}] 

    this.diagram.add(a); 
    this.diagram.addLabels(a, t); 
     
  } 

Sample: https://stackblitz.com/edit/angular-5wk9p1-3bcjnh 

Regards 
Aravind Ravi

Jan Jakubowski · Answer

HiThank you for answer. My cases are more complex than just adding labels to nodes.There are examples of what am I working on:https://ibb.co/mDtqGfwhttps://ibb.co/xqXs0qWI hope it better explains my problemThank youJan Jakubowski