|
<ejs-diagram #diagram id="diagram" width="100%" height="700px" [getConnectorDefaults]='connDefaults' [getNodeDefaults]='nodeDefaults' [layout]='layout' [dataSourceSettings]='data' (drop)="onDrop($event)"[snapSettings]='snapSettings'>
//Defines the default node properties
public nodeDefaults(obj: NodeModel): NodeModel {
//AllowDrop Constraints
obj.constraints = NodeConstraints.Default | NodeConstraints.AllowDrop;
return obj;
};
//drop event
public onDrop(args: any): void {
setTimeout(()=>{
let connector: ConnectorModel={};
if (args.element && args.target) {
if (args.element) {
//get an connector object
connector = this.diagram.getObject(args.element.inEdges[0]);
}
// this block executed when we drag any node in diagram and drop it onto the another node
if (connector) {
//update connector source and target id
connector.sourceID = args.target.id;
connector.targetID = args.element.id;
this.diagram.dataBind();
} else {
// this block executed when we drag node in palette and drop it onto the node in diagram
this.diagram.add({id: 'connector' + randomId(), sourceID: args.target.id, targetID: args.element.id});
this.removeElementsByClass('e-diagram-highlighter')
}
//To update an layout
this.diagram.doLayout();
}
}, 100);
} | 
