Creating complex node

[Karsten Schulz]

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?

[Shyam G]

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; 

 } 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/groupnode1012756126 

 

Help documentation for group node 

https://ej2.syncfusion.com/vue/documentation/diagram/group/?no-cache=1 

  

Regards, 

Shyam G 

[Karsten Schulz]

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?

[Shyam G]

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 21^st August, 2019 

  

Now, you can track the status of your request through below feedback link. 

 

Feedback Link: https://www.syncfusion.com/feedback/7947/layout-not-populated-with-group-nodes 

 

 

Regards, 

Shyam G 

[Shyam G]

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. 

https://www.npmjs.com/package/@syncfusion/ej2-diagrams  

 

Regards, 

Shyam G