I want to use auto layout to arrange nodes, to be specific symmetric layout, but I am not able to achieve that, no error yet layout is not applied.

Question

I am simply passing nodes and connectors to diagram and specifying layout as SymmetricLayout, I have also tried injecting it to diagram as shown in some examples, yet no success. I am attaching some code snippets for reference.

Any help will be really appreciated, Im stuck on this for long time, please help.

<ejs-diagram
            id="diagram"
            :width="width"
            :height="height"
            :nodes="nodes"
            :connectors="connectors"
            :getConnectorDefaults="getConnectorDefaults"
            :layout="layout"
            :getNodeDefaults="getNodeDefaults"
        ></ejs-diagram>

layout: {
                type: 'SymmetricLayout',
                horizontalSpacing: 100,
                verticalSpacing: 300,
                springLength: 80,
                margin: {
                    left: 0,
                    top: 20
                },
                springFactor: 0.8,
                maxIteration: 500}


let nodes = [
    {
        id: 'node1',
        // offsetX: 100,
        // offsetY: 100,
        style: { fill: '#82E0AA' },
        annotations: [{ content: 'Publisher' }],
        ports: node1Port
    },
    {
        id: 'node2',
        // offsetX: 300,
        // offsetY: 100,
        style: { fill: '#82E0AA' },
        annotations: [{ content: 'Completed Book', margin: { left: 5, right: 5 } }],
        ports: node2Port
    }]

let connectors = [
    {
        id: 'connector1',
        sourceID: 'node1',
        sourcePortID: 'port2',
        targetID: 'node2',
        targetPortID: 'port6',
        style: { strokeColor: '#5D6D7E', strokeWidth: 2 },
        targetDecorator: { style: { fill: '#5D6D7E' } }
    },
    {
        id: 'connector2',
        sourceID: 'node1',
        sourcePortID: 'port4',
        targetID: 'node4',
        targetPortID: 'port13',
        style: { strokeColor: '#5D6D7E', strokeWidth: 2 },
        targetDecorator: { style: { fill: '#5D6D7E' } }
    }]

Naganathan Ganesh Babu · Accepted Answer

Hi Vivek, 
 
we have modified and created a sample to update the symmetrical layout in diagram. Please refer to the below code example and sample. 
 
Modified Code example: 
layout: { 
                type: 'SymmetricalLayout', 
                horizontalSpacing: 100, 
                verticalSpacing: 300, 
                springLength: 80, 
                margin: { 
                    left: 0, 
                    top: 20 
                }, 
                springFactor: 0.8, 
                maxIteration: 500 
} 
 
Sample : https://www.syncfusion.com/downloads/support/forum/163002/ze/ConnectToPortToPortOnly1127730887  
 
Regards, 
Naganathan K G