BoldDeskWe are launching BoldDesk on Product Hunt soon. Learn more & follow us.
I am trying to set connector defaults through code.
this.diagram.connectorDefaults =
{
constraints: ConnectorConstraints.Default & ~ConnectorConstraints.Drag,
type: 'Orthogonal',
cornerRadius: 7,
targetDecorator: { height: 7, width: 7 },
style: { strokeColor: '#5C5C5B' },
fixedUserHandles: [
{
id: 'delete',
alignment: 'Before',
width: 25,
height: 25,
iconStrokeColor: 'white',
fill: '#7d7d7d',
pathData:
'M17 6h5v2h-2v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8H2V6h5V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v3zm1 2H6v12h12V8zM9 4v2h6V4H9z',
offset: 0.5,
padding: { top: 5, bottom: 5, left: 5, right: 5 },
cornerRadius: 15,
},
],
};
The connector defaults are not getting applied to newly created connector. But if I save and reload they a
Hi Khadeeja,
We cannot replicate the issue at our end. We have created a sample in which we can draw connector in diagram using drawing tool and the connector defaults values are applied properly. We have also provided a button in which we can add connector at runtime. We have provided stroke color and stroke width for the connector in connector defaults, and its applied properly. Please find the sample below:
Sample: https://stackblitz.com/edit/angular-vpahhh?file=src%2Fapp.component.html,src%2Fapp.component.ts
Regards,
Sivaranjith
I have replicated the issue that I am having:
Also, I don't want to provide it in HTML but handle everything in .ts file. Kindly please help.
Hi Khadeeja,
Binding of connectorDefaults in html is the proper way.But,If you don’t want to bind it in html file, we can bind connectorDefaults on button click but the connectorDefaults applied only to the connectors created at runtime and it will not apply to the connectors at initial rendering. Please find the sample below for your reference.
Sample:https://stackblitz.com/edit/angular-vpahhh-tmhkku?file=src%2Fapp.component.html
Regards,
Vivisa