Constraint for "editbox" on connector? Diagram JS2 Angular,TypeScript

Hi,

Is there any way to block/disable the small editbox(used for annotation) when doubleclicking a connector? Currently i'm using the doubleclick for a dialog(see example) with a grid, where the user can select what to fill the connector annotation with. But there are moments when there are no dialogs to show, for these I don't want the user to insert his/her own annotation.

//simple example
  <ejs-diagram
[getConnectorDefaults]="getConnectorDefaults"
(doubleClick)="doubleClick($event)" >
 </ejs-diagram>

//set the properties of the connector
getConnectorDefaults(args: ConnectorModel, diagram: Diagram): ConnectorModel {
args.targetDecorator.height = 5;
args.targetDecorator.width = 5;
args.style.strokeColor = "#797979";
args.addInfo = { status: "", segments: "" };
args.targetDecorator.style = { fill: "#797979", strokeColor: "#797979" };
args.constraints = ????
return args;
};

 doubleClick(args: NodeModel) {
    if (args["source"].propName === "connectors") 
// AND contains specific properties  -----> open a dialog
//return value for annotation of the selected connector

greetings,

Laurens 



1 Reply

KR Karkuvel Rajan Shanmugavel Syncfusion Team October 22, 2018 10:36 AM UTC

Hi Laurens, 
 
We can block / disable small edit box (used for annotation) when double click by setting ConnectorConstraints property as ReadOnly. We have provided code example to explain this. 
 
Code Example: 
 
 
args.constraints = ConnectorConstraints.Default | ConnectorConstraints.ReadOnly; 
 
 
Regards, 
Karkuvel Rajan S 


Loader.
Up arrow icon