We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Creating complex node

Hi guys,

I really beginner on syncfusion and it provided components. And I try to implement a complex node based on some sub nodes. For better illustrate the node i created a screenshot with your diagrambuilder:



My main problem is the positioning of the elements inside the group. I don't understand exactly the offset behavior of the nodes. Could somebody help me. Maybe providing code snippets for one complex node like i image in that picture?

4 Replies

SG Shyam G Syncfusion Team August 1, 2019 06:49 AM UTC

Hi Karsten, 
 
By default, the node’s will be positioned based on its offset value. The node’s offset is center of a node. For a group node, you should position the children by its offset. Based on the children bounds, we internally position a group element. If you specify the offset for group element, then all its children gets translated with respect to group offset. This is an default behavior of our diagram control. 
 
We have created a sample to create a group node and it is available in below link for download. Please refer to a code example 
 
Code example: 
 
  data: function() { 
    return { 
      width: "100%", 
      height: "499px",  
      nodes: [ 
        // create node 
        createNode("firstRectangle",400,200,500,300,""), 
        createNode("Image",100,100,400,300,"Image"), 
        createNode("MyNode",200,60,600,300,"MyNode"), 
        createNode("A",20,20,310,210,"A"), 
        createNode("B",20,20,310,410,"B"), 
        createNode("C",20,20,500,410,"C"), 
        createNode("D",20,20,690,410,"D"),  
    // Grouping nodes into a single group 
    { 
        id: 'group',   
        style:{ 
          fill:'transparent', 
          strokeWidth:0 
        }, 
        // set an node id to children collection 
        children: ['firstRectangle', 'Image', 'MyNode', 'A', 'B', 'C', 'D'] 
    } 
      ] 
    }; 
  }, 
 
//create node 
 function createNode(id, width, height, offsetX, offsetY, content) { 
   var node = {}; 
   node.id = id; 
   node.width = width; 
   node.height = height; 
   node.offsetX = offsetX; 
   node.offsetY = offsetY; 
   node.annotations = [{content: content}]; 
   return node; 
 } 
 
 
 
Help documentation for group node 
  
Regards, 
Shyam G 



KS Karsten Schulz August 1, 2019 11:05 AM UTC

Hi Shyam,

thanks a lot for your explaination. I implemented it like your snippet and it works perfectly.
Also so connection between both nodes are working.

But for now, i want to add the auto-arrangement between both complex nodes. and i try to add the "HierarchicalTree" but its not working. It seems to be there is no effect.
My nodes and connectors are provided by a vuex store. Is there a possibility to use an exsiting layout, or could i implement an own layout and put it into the diagram?


SG Shyam G Syncfusion Team August 2, 2019 12:12 PM UTC

Hi Karsten, 
 
Reported Issue : “Layout not populated with group Nodes“ 
 
We can reproduce the issue. We have confirmed this as a defect. We have logged a defect report for this issue. We will fix this issue and provide the patch on EJ2 patch release 21st August, 2019 
  
Now, you can track the status of your request through below feedback link. 
 
 
 
Regards, 
Shyam G 



SG Shyam G Syncfusion Team September 4, 2019 06:21 AM UTC

Hi Karsten, 
 
Sorry for the delay. 
 
Reported issue : Layout not populated with group Nodes. 
  
We are glad to announce that our patch release (v17.2.41) is rolled out successfully and In that release, we have added the fix for reported issue.    
     
Please upgrade to the latest version packages to resolve this issue. 
 
Regards, 
Shyam G 


Loader.
Live Chat Icon For mobile
Up arrow icon