Update the vectors for the connectors

[Reuvain Levin]

Hi,

I'm trying to update the curves of the connectors to look more like this 

instead of this which is the default 

this is what I'm trying but so far I haven't been able to get it to update it at all

connectorDefaults(connector: ConnectorModel): ConnectorModel {

    connector.type = 'Bezier';

    connector.sourceDecorator = { shape: 'None' };

    connector.targetDecorator = { shape: 'None' };

    connector.style = { strokeColor: '#d3d3d3' };

    // connector.segments = [

    //   {

    //     type: 'Bezier',

    //     // sourcePortID: PortIds.BottomPort,

    //     // targetPortID: PortIds.TopPort,

    //     vector1: { distance: 200, angle: 100 },

    //     vector2: { distance: 45, angle: 660 },

    //   },

    // ];

    connector.sourcePortID = PortIds.BottomPort;

    connector.targetPortID = PortIds.TopPort;

    return connector;

  }

what's commented is what's not working, everything else is working

thanks

[Aravind Ravi]

Hi Reuvain

We have created a sample for Bezier connector with vector points. On analyzing the provided code snippet you have set the sourceID and targetID inside connector’s segment property, so that issue may occur. We want to only define sourcePortID and targetPortID for connector and inside segment property we only define type and vector. Please refer to the below code snippet and sample

{

      id: 'connector1',

      type: 'Bezier',

      segments: [

        {

          type: 'Bezier',

          vector1: { distance: 30, angle: 90 },

          vector2: { distance: 30, angle: 270 },

        },

      ],

      sourceID: 'node1',

      targetID: 'node2',

    },

Sample: https://stackblitz.com/edit/angular-hbq2tr?file=app.component.ts

Regards

Aravind Ravi

[Reuvain Levin]

Hi  Aravind,

Thank you, I tried what you suggested and it's not working.

It doesn't seem to be applying any change.

I'm trying to do this in the function that I'm passing to the diagram to use as the default connector builder, is it possibly to apply such changes to all the connectors together?

 

  ngAfterViewInit(){

    this.diagram.getConnectorDefaults = this.connectorDefaults;

  }

connectorDefaults(connector: ConnectorModel): ConnectorModel {

    connector.type = 'Bezier';

    connector.sourceDecorator = { shape: 'None' };

    connector.targetDecorator = { shape: 'None' };

    connector.style = { strokeColor: '#d3d3d3' };

    connector.sourcePortID = PortIds.BottomPort;

    connector.targetPortID = PortIds.TopPort;

    

    connector.segments = [

      {

        type: 'Bezier',

        vector1: { distance: 70, angle: 90 },

        vector2: { distance: 30, angle: 270 }

      },

    ];

    return connector;

  }

thanks

[Reuvain Levin]

I got it working together with the answer from  Aravind Ravi.

From the created event I updated the connectors directly and then it worked.

<ejs-diagram   #diagram  (created)="updateConnectors()"> </ejs-diagram>

  updateConnectors(){

    this.diagram.connectors.forEach(c => {

      c.segments = [

        { 

          type: 'Bezier',

          vector1: { distance: 32, angle: 90 },

          vector2: { distance: 35, angle: 270 }

        }

      ];

    });

    this.diagram.dataBind(); 

  }

Thank you!

[Aravind Ravi]

Hi Reuvain,

Most welcome.

Regards

Aravind Ravi