Migration from Essential JS 1 in Angular Diagram component

HTML

HTML

HTML

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [pageSettings]=“pageSettings” > Script

public pageSettings: PageSettingsModel; ngOnInit(): void { this.pageSettings = { background: { align: ‘XMinYMin’ }, } }

HTML

public backgroundImage; constructor() { this.backgroundImage = { scale: “Meet”, }; }

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [pageSettings]=“pageSettings” > Script

public pageSettings: PageSettingsModel; ngOnInit(): void { this.pageSettings = { background: { scale: ‘Meet’, }, } }

HTML

public backgroundImage; constructor() { this.backgroundImage = { source: ”https://www.w3schools.com/images/w3schools_green.jpg” }; }

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [pageSettings]=“pageSettings” > Script

public pageSettings: PageSettingsModel; ngOnInit(): void { this.pageSettings = { background: { source: ”https://www.w3schools.com/images/w3schools_green.jpg”, }, } }

HTML

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” bridgeDirection = “Bottom” >

Script

commandManager: Object; constructor() { this.commandManager = { commands: { “clone”: { gesture: { key: Keys.C, keyModifiers: KeyModifiers.Shift }, canExecute: function(args) { let diagram = $(“#diagramContent”).ejDiagram(“instance”); return diagram.model.selectedItems.children.length; }, execute: function(args) { let diagram = $(“#diagramContent”).ejDiagram(“instance”); diagram.copy(); diagram.paste(); } } } } });

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [commandManager]=“commandManager” > Script

public commandManager: CommandManager; ngOnInit(): void { this.commandManager = { commands: [{ name: ‘customCopy’, parameter: ‘node’, canExecute: function() { if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) { return true; } return false; }, execute: function() { for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) { diagram.selectedItems.nodes[i].style.fill = ‘red’; } diagram.dataBind(); }, gesture: { key: Keys.G, keyModifiers: KeyModifiers.Shift } }] } }

commandManager: Object; constructor() { this.commandManager = { commands: { “clone”: { gesture: { key: Keys.C, keyModifiers: KeyModifiers.Shift }, canExecute: function(args) { let diagram = $(“#diagramContent”).ejDiagram(“instance”); return diagram.model.selectedItems.children.length; }, execute: function(args) { let diagram = $(“#diagramContent”).ejDiagram(“instance”); diagram.copy(); diagram.paste(); } } } } });

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [commandManager]=“commandManager” > Script

public commandManager: CommandManager; ngOnInit(): void { this.commandManager = { commands: [{ name: ‘customCopy’, parameter: ‘node’, canExecute: function() { if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) { return true; } return false; }, execute: function() { for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) { diagram.selectedItems.nodes[i].style.fill = ‘red’; } diagram.dataBind(); }, gesture: { key: Keys.G, keyModifiers: KeyModifiers.Shift } }] } }

commandManager: Object; constructor() { this.commandManager = { commands: { “clone”: { gesture: { key: Keys.C, keyModifiers: KeyModifiers.Shift }, canExecute: function(args) { let diagram = $(“#diagramContent”).ejDiagram(“instance”); return diagram.model.selectedItems.children.length; }, execute: function(args) { let diagram = $(“#diagramContent”).ejDiagram(“instance”); diagram.copy(); diagram.paste(); } } } } });

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [commandManager]=“commandManager” > Script

public commandManager: CommandManager; ngOnInit(): void { this.commandManager = { commands: [{ name: ‘customCopy’, parameter: ‘node’, canExecute: function() { if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) { return true; } return false; }, execute: function() { for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) { diagram.selectedItems.nodes[i].style.fill = ‘red’; } diagram.dataBind(); }, gesture: { key: Keys.G, keyModifiers: KeyModifiers.Shift } }] } }

commandManager: Object; constructor() { this.commandManager = { commands: { “clone”: { gesture: { key: Keys.C, keyModifiers: KeyModifiers.Shift }, canExecute: function(args) { let diagram = $(“#diagramContent”).ejDiagram(“instance”); return diagram.model.selectedItems.children.length; }, execute: function(args) { let diagram = $(“#diagramContent”).ejDiagram(“instance”); diagram.copy(); diagram.paste(); } } } } });

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [commandManager]=“commandManager” > Script

public commandManager: CommandManager; ngOnInit(): void { this.commandManager = { commands: [{ name: ‘customCopy’, parameter: ‘node’, canExecute: function() { if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) { return true; } return false; }, execute: function() { for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) { diagram.selectedItems.nodes[i].style.fill = ‘red’; } diagram.dataBind(); }, gesture: { key: Keys.G, keyModifiers: KeyModifiers.Shift } }] } }

commandManager: Object; constructor() { this.commandManager = { commands: { “clone”: { gesture: { key: Keys.C, keyModifiers: KeyModifiers.Shift }, canExecute: function(args) { let diagram = $(“#diagramContent”).ejDiagram(“instance”); return diagram.model.selectedItems.children.length; }, execute: function(args) { let diagram = $(“#diagramContent”).ejDiagram(“instance”); diagram.copy(); diagram.paste(); } } } } });

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [commandManager]=“commandManager” > Script

commandManager: Object; constructor() { this.commandManager = { commands: [{ name: ‘customCopy’, parameter: ‘node’, canExecute: function() { if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) { return true; } return false; }, execute: function() { for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) { diagram.selectedItems.nodes[i].style.fill = ‘red’; } diagram.dataBind(); }, gesture: { key: Keys.G, keyModifiers: KeyModifiers.Shift } }] } }

commandManager: Object; constructor() { this.commandManager = { commands: { “clone”: { gesture: { key: Keys.C, keyModifiers: KeyModifiers.Shift }, canExecute: function(args) { let diagram = $(“#diagramContent”).ejDiagram(“instance”); return diagram.model.selectedItems.children.length; }, execute: function(args) { let diagram = $(“#diagramContent”).ejDiagram(“instance”); diagram.copy(); diagram.paste(); } } } } });

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [commandManager]=“commandManager” > Script

public commandManager: CommandManager; ngOnInit(): void { this.commandManager = { commands: [{ name: ‘customCopy’, parameter: ‘node’, canExecute: function() { if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) { return true; } return false; }, execute: function() { for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) { diagram.selectedItems.nodes[i].style.fill = ‘red’; } diagram.dataBind(); }, gesture: { key: Keys.G, keyModifiers: KeyModifiers.Shift } }] } }

commandManager: Object; constructor() { this.commandManager = { commands: { “clone”: { parameter : “node”, gesture: { key: Keys.C, keyModifiers: KeyModifiers.Shift }, canExecute: function(args) { let diagram = $(“#diagramContent”).ejDiagram(“instance”); return diagram.model.selectedItems.children.length; }, execute: function(args) { let diagram = $(“#diagramContent”).ejDiagram(“instance”); diagram.copy(); diagram.paste(); } } } } });

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [commandManager]=“commandManager” > Script

public commandManager: CommandManager; ngOnInit(): void { this.commandManager = { commands: [{ name: ‘customCopy’, parameter: ‘node’, canExecute: function() { if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) { return true; } return false; }, execute: function() { for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) { diagram.selectedItems.nodes[i].style.fill = ‘red’; } diagram.dataBind(); }, gesture: { key: Keys.G, keyModifiers: KeyModifiers.Shift } }] } }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

public addInfo; constructor() { var addInfo = { Description: “Bidirectional Flow” }; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” > Script

public addInfo: object[]; ngOnInit(): void { this.addInfo = { Description: “Bidirectional Flow” }; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

public connectors; constructor() { var connector = { name: “connector”, sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, bridgeSpace: 15, }; this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

public connectors: ConnectorModel[]; ngOnInit(): void { let connectors: ConnectorModel[] = [{ id: ‘connector’, type: ‘Straight’, sourcePoint: { x: 500, y: 100 }, bridgeSpace: 15, targetPoint: { x: 600, y: 200 } }]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

var connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    constraints: ConnectorConstraints.Default & ~ConnectorConstraints.Select
};
this.connectors = [connector];

}

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {

let connectors: ConnectorModel[] = [{ id: ‘connector’, type: ‘Straight’, sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, constraints: ConnectorConstraints.Default | ConnectorConstraints.Drag }]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

public connectors; constructor() { var connector = { name: “connector”, sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, cornerRadius: 10, segments:[{ type: “orthogonal”}] }; this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {

let connectors: ConnectorModel[] = [{ id: ‘connector’, type: ‘Straight’, sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, cornerRadius: 10, type: ‘Orthogonal’, }]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

public connectors; constructor() { var connector = { name: “connector”, sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, cssClass: “hoverConnector” }; this.connectors = [connector]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

public connectors; constructor() { var connector = { name: “connector”, sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, horizontalAlign:HorizontalAlignment.Right }; this.connectors = [connector]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

public connectors; constructor() { var connector = { name: “connector”, sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, labels:[{ text:“connector” }] }; this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[]; ngOnInit(): void { let connectors: ConnectorModel[] = [{ id: ‘connector’, type: ‘Straight’, sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, annotations: [{ id: ‘label’, content: ‘Text’, offset: 0.5 }] }]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

public connectors; constructor() { let connector = { name: “connector”, sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, lineColor:“blue” }; this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[]; ngOnInit(): void { let connectors: ConnectorModel[] = [{ id: ‘connector’, type: ‘Straight’, sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, style: { strokeColor: ‘blue’ }, }]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[]; ngOnInit(): void { let connectors: ConnectorModel[] = [{ id: ‘connector’, type: ‘Straight’, sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, style: { strokeColor: ‘blue’, strokeWidth: 3, strokeDashArray: ‘2,2’ }, }]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[]; ngOnInit(): void { let connectors: ConnectorModel[] = [{ id: ‘connector’, type: ‘Straight’, sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, style: { strokeColor: ‘blue’, strokeWidth: 3, strokeDashArray: ‘2,2’ }, }]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
hitPadding: 10
}];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
margin: { bottom: 3 }
}];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[]; ngOnInit(): void { let connectors: ConnectorModel[] = [{ id: ‘connector’, type: ‘Straight’, sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, margin: { top: 3 } }]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
margin: { left: 3 }

}]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
 let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
margin: { right: 3 }
  }];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
}
 }];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[]; ngOnInit(): void { let connectors: ConnectorModel[] = [{ id: ‘connector’, type: ‘Straight’, sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, style: { strokeColor: ‘blue’, strokeWidth: 3, strokeDashArray: ‘2,2’, opacity: 0.5 }, }]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

public connectors; constructor() { let connector = { name: “connector”, sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, segments: [{type:“straight”, point: { x:75, y:150 }}] }; this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
segments: [
    { type: 'Orthogonal', length: 30, direction: 'Bottom' },
    { type: 'Orthogonal', length: 80, direction: 'Right' }]
  }];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
 let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
segments: [
    { type: 'Orthogonal', length: 30, direction: 'Bottom' },
    { type: 'Orthogonal', length: 80, direction: 'Right' }]
  }];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
  let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
segments: [
    { type: 'Orthogonal', length: 30, direction: 'Bottom' },
    { type: 'Orthogonal', length: 80, direction: 'Right' }]
 }];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

public connectors; constructor() { let connector = { name: “connector”, sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, segments: [{type:“straight”, point: { x:75, y:150 } }] }; this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
  let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
segments: [
    { type: 'Straight', point: { x: 800, y: 50 } }]
   }];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
 let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
segments: [{
    type: 'Bezier',
    point: { x: 600, y: 300 },
    point1: { x: 525, y: 475 }
}]
 }];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
   let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
segments: [{
    type: 'Bezier',
    point: { x: 600, y: 300 },
    point1: { x: 525, y: 475 },
    point2: { x: 575, y: 475 }
}]
 }];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
segments: [{
    type: 'Bezier',
    point: { x: 600, y: 300 },
    point1: { x: 525, y: 475 },
    point2: { x: 575, y: 475 }
}]

}]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
 let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
segments: [{
    type: 'Bezier',
    point: { x: 900, y: 160 },
    vector1: { angle: 20, distance: 75 },
    vector2: { angle: 20, distance: 75 }
    }],
}];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
segments: [{
    type: 'Bezier',
    point: { x: 900, y: 160 },
    vector1: { angle: 20, distance: 75 },
    vector2: { angle: 20, distance: 75 }
}]
 }];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
 let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
segments: [{
    type: 'Bezier',
    point: { x: 600, y: 300 },
    point1: { x: 525, y: 475 },
    point2: { x: 575, y: 475 }
}],
shape: { type: 'Bpmn', flow: 'Message', message: 'InitiatingMessage' }

}]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
sourceDecorator: {
    shape: 'Arrow',
    },

}]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[]; ngOnInit(): void { let connectors: ConnectorModel[] = [{ id: ‘connector’, type: ‘Straight’, sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, sourceDecorator: { shape: ‘Arrow’, style: { strokeColor: ‘red’ }, }, }]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
 let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
sourceDecorator: {
    shape: 'Arrow', strokeWidth: 5
    },
  }];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
sourceDecorator: {
    shape: 'Arrow', fill: 'black'
    },
 }];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
 let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
sourceDecorator: {
    shape: 'Arrow',
    height: 10, width: 10
    },
   }];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
 let connectors: ConnectorModel[] = [{
 id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
 sourceDecorator: {
    shape: 'Custom',
    pathData:"M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z"
    },
  }];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
sourceDecorator: {
    shape: 'Arrow',
    },
    }];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
  let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
sourceDecorator: {
    shape: 'Arrow',
    width: 10, height:10
    },
 }];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” nodes=“nodes” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” [nodes]=“nodes”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
  let nodes: NodeModel[] = [
{
    id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90
},
{
    id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90
}];
   let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourceID: 'source', targetID: 'target'
   }];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” nodes=“nodes” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” [nodes]=“nodes”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
  let nodes: NodeModel[] = [
{
    id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90
},
{
    id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90
}];

let connectors: ConnectorModel[] = [{ id: ‘connector’, type: ‘Straight’, hitPadding: 2 sourceID: ‘source’, targetID: ‘target’ }]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
  let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: { x: 100, y: 100 },
targetPoint: { x: 200, y: 200 },

}]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” nodes=“nodes” > Script

public connectors; constructor() { let node1 = {name:“source”, offsetX:100, offsetY:100, width: 50, height: 50, ports:[{ name:“port”, offset: { x:1, y:0.5 } }] }; let node2 = {name:“target”, offsetX:200, offsetY:200, width: 50, height: 50, ports:[{ name:“port1”, offset: { x:0, y:0.5 } }] }; let connector = { name:“connector”, sourceNode:“source”, targetNode:“target”, sourcePort: “port”, targetPort:“port1” }; this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
 let nodeport1: PointPortModel = { id: 'port', shape: 'Square', offset: { x: 1, y: 0.5 } };
  let nodeport2: PointPortModel = { id: 'port1', shape: 'Square', offset: { x: 0, y: 0.5 } };
     let nodes: NodeModel[] = [
    {
    id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90, ports: [nodeport1]
},
{
    id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90, ports: [nodeport2]
}];

let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourceID: 'source', targetID: 'target',
sourcePortID: 'port',
targetPortID: 'port1',

}]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
 let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
targetDecorator: {
    shape: 'Arrow',
    },

}]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
  let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
targetDecorator: {
    shape: 'Arrow',
    style: { strokeColor: 'red' },
    },
 }];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
  let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
targetDecorator: {
    shape: 'Arrow', strokeWidth: 5
    },

}]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
targetDecorator: {
    shape: 'Arrow', fill: 'black'
    },

}]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
targetDecorator: {
    shape: 'Arrow',
    height: 10, width: 10
    },
 }];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
targetDecorator: {
    shape: 'Custom',
    pathData:"M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z"
    },
  }];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
  let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
targetDecorator: {
    shape: 'Arrow',
    },

}]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
  let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
targetDecorator: {
    shape: 'Arrow',
    width: 10, height:10
    },

}];

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” [nodes]=“nodes” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
  let nodes: NodeModel[] = [
{
    id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90
},
{
    id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90
}];
  let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourceID: 'source', targetID: 'target'
 }];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” [nodes]=“nodes” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” [nodes]=“nodes”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
  let nodes: NodeModel[] = [
{
    id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90
},
{
    id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90
}];
  let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
hitPadding: 2
sourceID: 'source', targetID: 'target'
}];
}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
  let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: { x: 100, y: 100 },
targetPoint: { x: 200, y: 200 },

}]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” [nodes]=“nodes”> Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” [nodes]=“nodes”> Script

public connectors: ConnectorModel[];
ngOnInit(): void {
let nodeport1: PointPortModel = { id: 'port', shape: 'Square', offset: { x: 1, y: 0.5 } };
let nodeport2: PointPortModel = { id: 'port1', shape: 'Square', offset: { x: 0, y: 0.5 } };
let nodes: NodeModel[] = [
{
    id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90, ports: [nodeport1]
},
{
    id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90, ports: [nodeport2]
}];

let connectors: ConnectorModel[] = [{ id: ‘connector’, type: ‘Straight’, sourceID: ‘source’, targetID: ‘target’, sourcePortID: ‘port’, targetPortID: ‘port1’, }]; }

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[]; ngOnInit(): void { let connectors: ConnectorModel[] = [{ id: ‘connector’, type: ‘Straight’, sourcePoint: { x:100, y: 100 }, targetPoint :{ x:200, y:200 }, constraints: ConnectorConstraints.Default | ConnectorConstraints.Tooltip, tooltip: { content: ‘Connector’, position: ‘TopCenter’, showTipPointer: true, }, }]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” [nodes]=“nodes”> Script

this.connectors = [connector]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” [nodes]=“nodes”> Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

}

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors” [nodes]=“nodes”> Script

public connectors; constructor() { let connector = { name:“connector”, sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, zOrder: 4 }; this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [connectors]=“connectors”> Script

public connectors: ConnectorModel[]; ngOnInit(): void { let connectors: ConnectorModel[] = [{ id: ‘connector’, type: ‘Straight’, sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, zIndex: 1 }]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” connectorTemplate = “connectorTemplate” dataSourceSettings = “dataSourceSettings”> Script

public connectorTemplate(diagram, connector) { if(connector.sourceNode && connector.targetNode){ connector.lineColor = “green”; } } }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [constraints]=“constraints” > Script

this.connectors = [connector]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [constraints]=“constraints”> Script

public constraints: DiagramConstraints; ngOnInit(): void { this.constraints =DiagramConstraints.Default | DiagramConstraints.Bridging }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [enableContextMenu]=“enableContextMenu” [contextMenu]=“contextMenu”> Script

public contextMenu; public enableContextMenu; constructor() { let menuItems = [{ “name”: “hyperLink” }]; this.contextMenu = {items: menuItems }; this.enableContextMenu = true; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [contextMenuSettings]=“contextMenuSettings” > Script

public constraints: ContextMenuSettingsModel; ngOnInit(): void { this.contextMenuSettings = { show: true, items: [{ text: ‘delete’, id: ‘delete’, target: ‘.e-diagramcontent’, iconCss: ‘e-copy’ }], } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [enableContextMenu]=“enableContextMenu” [contextMenu]=“contextMenu”> Script

public contextMenu; public enableContextMenu; constructor() { let menuItems = [{ “text”: “ZoomIn” }]; this.contextMenu = {items: menuItems }; this.enableContextMenu = true; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [contextMenuSettings]=“contextMenuSettings” > Script

public constraints: ContextMenuSettingsModel; ngOnInit(): void { this.contextMenuSettings = { show: true, items: [{ text: ‘ZoomIn’ }], } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [enableContextMenu]=“enableContextMenu” [contextMenu]=“contextMenu”> Script

public contextMenu; public enableContextMenu; constructor() { let menuItems = [{ “name”: “hyperLink” }]; this.contextMenu = {items: menuItems }; this.enableContextMenu = true; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [contextMenuSettings]=“contextMenuSettings” > Script

public constraints: ContextMenuSettingsModel; ngOnInit(): void { this.contextMenuSettings = { show: true, items: [{ text: ‘delete’, id: ‘delete’ }] } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [enableContextMenu]=“enableContextMenu” [contextMenu]=“contextMenu”> Script

public contextMenu; public enableContextMenu; constructor() { let menuItems = [{ “name”: “zoomin”, “text”: “ZoomIn”,“imageUrl”: “Images/zoomin.png”, “style”: "" }]; this.contextMenu = {items: menuItems }; this.enableContextMenu = true; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [contextMenuSettings]=“contextMenuSettings” > Script

public constraints: ContextMenuSettingsModel; ngOnInit(): void { this.contextMenuSettings = { show: true, items: [{ ‘id’: ‘zoomin’, ‘text’: ‘ZoomIn’,‘url’: ‘Images/zoomin.png’, }], } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [enableContextMenu]=“enableContextMenu” [contextMenu]=“contextMenu”> Script

public contextMenu; public enableContextMenu; constructor() { let menuItems = [{ “name”: “zoomin”, “text”: “ZoomIn”,“imageUrl”: “Images/zoomin.png”, “cssClass”:“menu”, “style”: "" }]; this.contextMenu = {items: menuItems }; this.enableContextMenu = true; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [contextMenuSettings]=“contextMenuSettings” > Script

public constraints: ContextMenuSettingsModel; ngOnInit(): void { this.contextMenuSettings = { show: true, items: [{ text: ‘delete’, id: ‘delete’, target: ‘.e-diagramcontent’, iconCss: ‘e-copy’ }], } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [enableContextMenu]=“enableContextMenu” [contextMenu]=“contextMenu”> Script

public contextMenu; public enableContextMenu; constructor() { this.contextMenu = { // Defines the custom context menu items items: [{ name: “zoom”, // Text to be displayed text: “Zoom”, // Defines the sub items subItems: [{name: “zoomIn”, text: “ZoomIn”}, {name: “zoomOut”,text: “ZoomOut”}] }] }; this.enableContextMenu = true; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [contextMenuSettings]=“contextMenuSettings” > Script

public constraints: ContextMenuSettingsModel; ngOnInit(): void { this.contextMenuSettings = { show: true, items: [{ text: ‘Zoom’, id: ‘zoom’, items: [{name: “zoomIn”, text: “ZoomIn”}, {name: “zoomOut”,text: “ZoomOut”}] }], showCustomMenuOnly: false, } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [enableContextMenu]=“enableContextMenu” [contextMenu]=“contextMenu”> Script

public contextMenu; public enableContextMenu; constructor() { this.contextMenu = { showCustomMenuItemsOnly: true }; this.enableContextMenu = true; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [contextMenuSettings]=“contextMenuSettings” > Script

public constraints: ContextMenuSettingsModel; ngOnInit(): void { this.contextMenuSettings = { showCustomMenuOnly: false, } }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [contextMenuSettings]=“contextMenuSettings” > Script

public constraints: ContextMenuSettingsModel; ngOnInit(): void { this.contextMenuSettings = { show: true, items: [{ text: ‘Save’, id: ‘save’, target: ‘.e-diagramcontent’, iconCss: ‘e-save’, separator: true }, { text: ‘Load’, id: ‘load’, target: ‘.e-diagramcontent’, iconCss: ‘e-load’ }, } }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [contextMenuSettings]=“contextMenuSettings” > Script

public constraints: ContextMenuSettingsModel; ngOnInit(): void { this.contextMenuSettings = { show: true, items: [{ text: ‘delete’, id: ‘delete’, target: ‘.e-diagramcontent’, iconCss: ‘e-copy’ }], showCustomMenuOnly: false, } }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [contextMenuSettings]=“contextMenuSettings” > Script

public constraints: ContextMenuSettingsModel; ngOnInit(): void { this.contextMenuSettings = { show: true, items: [{ text: ‘delete’, id: ‘delete’, target: ‘.e-diagramcontent’, iconCss: ‘e-copy’ }], showCustomMenuOnly: false, } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

    this.dataSourceSettings = { dataSource: data }

}

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [dataSourceSettings]=“dataSourceSettings”> Script

public diagram: DiagramComponent; public dataSourceSettings: Object; ngOnInit(): void { let items: object[] = [ { “Id”: “E1”, “Name”: “Maria Anders”, “Designation”: “Managing Director” }, { “Id”: “E2” , “Name”: “Ana Trujillo”, “Designation”: “Project Manager”, “ReportingPerson”: “E1” } ]; this.dataSourceSettings = { dataManager: items} }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

    this.dataSourceSettings = { id: "Id", dataSource: data }

}

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [dataSourceSettings]=“dataSourceSettings”> Script

public diagram: DiagramComponent; public dataSourceSettings: Object; ngOnInit(): void { let items: object[] = [ { “Id”: “E1”, “Name”: “Maria Anders”, “Designation”: “Managing Director” }, { “Id”: “E2” , “Name”: “Ana Trujillo”, “Designation”: “Project Manager”, “ReportingPerson”: “E1” } ]; this.dataSourceSettings = { id: ‘Id’, dataManager: items } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

    this.dataSourceSettings = { id: "Id", parent: "ReportingPerson", dataSource: data }

}

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [dataSourceSettings]=“dataSourceSettings”> Script

public diagram: DiagramComponent; public dataSourceSettings: Object; ngOnInit(): void { let items: object[] = [ { “Id”: “E1”, “Name”: “Maria Anders”, “Designation”: “Managing Director” }, { “Id”: “E2” , “Name”: “Ana Trujillo”, “Designation”: “Project Manager”, “ReportingPerson”: “E1” } ]; this.dataSourceSettings = { id: ‘Id’, parentId: ‘ReportingPerson’, dataManager: items } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { this.dataSourceSettings = { dataSource: ej.DataManager({ url: ”http://mvc.syncfusion.com/Services/Northwnd.svc/” }), query: ej.Query().from(“Employees”).select(“EmployeeID,ReportsTo,FirstName”), tableName: “Employees”, id: “EmployeeID”, parent: “ReportsTo” } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { let data = [{ “Id”: “E1”, “Name”: “Maria Anders”, “Designation”: “Managing Director” }, { “Id”: “E2”, “Name”: “Ana Trujillo”, “Designation”: “Project Manager”, “ReportingPerson”: “E1” } ]; this.dataSourceSettings = { id: “Id”, parent: “ReportingPerson”, root: “E1”, dataSource: data } }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [dataSourceSettings]=“dataSourceSettings”> Script

public diagram: DiagramComponent; public dataSourceSettings: Object; ngOnInit(): void { let items: object[] = [ { “Id”: “E1”, “Name”: “Maria Anders”, “Designation”: “Managing Director” }, { “Id”: “E2” , “Name”: “Ana Trujillo”, “Designation”: “Project Manager”, “ReportingPerson”: “E1” } ]; this.dataSourceSettings = { id: ‘Id’, parentId: ‘ReportingPerson’, dataManager: items, root: ‘E1’ } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { this.dataSourceSettings = { dataSource: ej.DataManager({ url: ”http://mvc.syncfusion.com/Services/Northwnd.svc/” }), query: ej.Query().from(“Employees”).select(“EmployeeID,ReportsTo,FirstName”), //Table name tableName: “Employees”, id: “EmployeeID”, parent: “ReportsTo” } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { this.dataSourceSettings = { id: “Name”, crudAction: { read: ”http://js.syncfusion.com/demos/ejservices/api/Diagram/GetNodes” } } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { this.dataSourceSettings = { id: “Name”, crudAction: { create: ”http://js.syncfusion.com/demos/ejservices/api/Diagram/AddNodes”, } } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { this.dataSourceSettings = { id: “Name”, crudAction: { update: ”http://js.syncfusion.com/demos/ejservices/api/Diagram/UpdateNodes”, } } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { this.dataSourceSettings = { id: “Name”, crudAction: { destroy: ”http://js.syncfusion.com/demos/ejservices/api/Diagram/DeleteNodes” } } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { let data = [ this.dataSourceSettings = { id: “Name”, crudAction: { read: ”http://js.syncfusion.com/demos/ejservices/api/Diagram/GetNodes”; } } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { this.dataSourceSettings = { id: ‘Name’, customFields: [ “Description”, “Color” ] } }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [dataSourceSettings]=“dataSourceSettings”> Script

public diagram: DiagramComponent; public dataSourceSettings: Object; ngOnInit(): void { this.dataSourceSettings = { id: ‘Name’, customFields: [ “Description”, “Color” ] } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { this.dataSourceSettings = { id: “Name”, connectionDataSource: { id: “Name” } } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { let data = [{ “Id”: “E1”, “Name”: “Maria Anders”, “Designation”: “Managing Director” }, { “Id”: “E2”, “Name”: “Ana Trujillo”, “Designation”: “Project Manager”, “ReportingPerson”: “E1” } ]; this.dataSourceSettings = { id: “Name”, connectionDataSource: { id: “Name”, dataSource: data } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { this.dataSourceSettings = { id: “Name”, connectionDataSource: { id: “Name” } } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { this.dataSourceSettings = { id: “Name”, connectionDataSource: { id: “Name”, sourceNode: “sourceNode”, } } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { this.dataSourceSettings = { id: “Name”, connectionDataSource: { id: “Name”, targetNode: “targetNode” } } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { this.dataSourceSettings = { id: “Name”, connectionDataSource: { id: “Name”, sourcePointX:200 } } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { this.dataSourceSettings = { id: “Name”, connectionDataSource: { id: “Name”, sourcePointY:200 } } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { this.dataSourceSettings = { id: “Name”, connectionDataSource: { id: “Name”, targetPointX:200 } } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { this.dataSourceSettings = { id: “Name”, connectionDataSource: { id: “Name”, targetPointY:200 } } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { this.dataSourceSettings = { id: “Name”, connectionDataSource: { id: “Name”, sourceNode: “sourceNode”, targetNode: “targetNode”, crudAction: { read: ”http://js.syncfusion.com/demos/ejservices/api/Diagram/GetConnectors” } } } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { this.dataSourceSettings = { id: “Name”, connectionDataSource: { id: “Name”, sourceNode: “sourceNode”, targetNode: “targetNode”, crudAction: { create: ”http://js.syncfusion.com/demos/ejservices/api/Diagram/AddConnectors”, } } } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { this.dataSourceSettings = { id: “Name”, connectionDataSource: { id: “Name”, crudAction: { update: ”http://js.syncfusion.com/demos/ejservices/api/Diagram/UpdateConnectors”, } } } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { this.dataSourceSettings = { id: “Name”, connectionDataSource: { id: “Name”, crudAction: { destroy: ”http://js.syncfusion.com/demos/ejservices/api/Diagram/DeleteConnectors” } } } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { this.dataSourceSettings = { id: “Name”, connectionDataSource: { id: “Name”, crudAction: { read: ”http://js.syncfusion.com/demos/ejservices/api/Diagram/GetConnectors” } } } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSource]=“dataSourceSettings”> Script

public dataSourceSettings; constructor() { this.dataSourceSettings = { id: “Name”, connectionDataSource: { id: “Name”, customFields: [ “Description”, “Color”] } } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [dataSourceSettings]=“dataSourceSettings” layout=“layout”> Script

public dataSourceSettings; public layout; constructor() { this.layout = { type: ‘HierarchicalTree’, verticalSpacing: 40 } this.dataSourceSettings = { id: ‘Name’, parentId: ‘ReportingPerson’, dataManager: items, doBinding: (nodeModel: NodeModel, data: object, diagram: Diagram) => { nodeModel.annotations = [{ content: data[‘Name’], margin: { top: 10 } }]; } } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [defaultSettings]=“defaultSettings”> Script

public defaultSettings; constructor() { this.defaultSettings = { node: { fillColor:“red”} }; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [getNodeDefaults]=“getNodeDefaults”> Script

public diagram: DiagramComponent; public getNodeDefaults(node: NodeModel, diagram: Diagram): NodeModel { node.style = { fill: ‘blue’, strokeColor: ‘none’, strokeWidth: 2 }; return node; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [defaultSettings]=“defaultSettings”> Script

public defaultSettings; constructor() { this.defaultSettings = { connector: { lineColor:“red”, lineWidth:4, lineDashArray:“2,2” } }; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [getConnectorDefaults]=“getConnectorDefaults”> Script

public diagram: DiagramComponent; public getConnectorDefaults(connector: ConnectorModel, diagram: Diagram): ConnectorModel { connector= { targetDecorator: { shape: ‘None’ }, type: ‘Orthogonal’ }; return connector; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [defaultSettings]=“defaultSettings”> Script

public defaultSettings; constructor() { this.defaultSettings = { group: {constraints: NodeConstraints.Default & ~NodeConstraints.Drag } }; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [drawType]=“drawType”> Script

public drawType; constructor() { this.drawType ={type:“node”}; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px”(created)=‘diagramCreate($event)‘> Script

public diagram: DiagramComponent; public diagramCreate(args: Object): void { this.diagram.drawingObject = {id: ‘connector’, type: ‘Straight’}; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [enableAutoScroll]=“enableAutoScroll”> Script

public enableAutoScroll; constructor() { this.enableAutoScroll = false; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [canAutoScroll]=‘canAutoScroll’> Script

public canAutoScroll:boolean; ngOnInit(): void { this.canAutoScroll= true; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [enableContextMenu]=“enableContextMenu”> Script

public enableContextMenu; constructor() { this.enableContextMenu = false; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [contextMenuSettings]=‘contextMenuSettings’> Script

public contextMenuSettings; ngOnInit(): void { this. contextMenuSettings: { show: true } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [enablePersistence]=“true”>

<ej-diagram id=“diagramCore” width=“1000” height=“600” [enableRtl]=“true”>

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [getDescription]=“getTool” [nodes]=“nodes”> Script

public getTool(action: string): ToolBase { let tool: ToolBase; if (action === ‘userHandle’) { tool = new CloneTool(diagram.commandHandler, true); } return tool; } public nodes: NodeModel[] = [{ id: ‘node1’, width: 100, height: 100, offsetX: 100, offsetY: 100, }, { id: ‘node2’, width: 100, height: 100, offsetX: 300, offsetY: 100, shape: { type: ‘Basic’, shape: ‘Ellipse’ }, }]; } class CloneTool extends ToolBase { public mouseDown(args: MouseEventArgs): void { super.mouseDown(args); diagram.copy(); diagram.paste(); } }

<ejs-diagram #diagram id=“diagram” height=“700px” >

<ejs-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes” [connectors] = “connectors”> Script

public nodes= [{ id: ‘node1’, offsetX: 100, offsetY: 100, width: 100, height: 100, }, { offsetX: 200, offsetY: 200, width: 100, height: 100, id: ‘node2’ }], public connectors = [{ id: ‘connector1’, sourcePoint: { x: 100, y: 200 }, targetPoint: { x: 200, y: 300 }, type: ‘Orthogonal’ }] }); public created() { let objects: (NodeModel | ConnectorModel)[] = []; objects.push(this.diagram.nodes[0], this.diagram.nodes[1], this.diagram.connectors[0]); this.diagram.historyList.startGroupAction(); this.diagram.distribute(‘Top’, objects); this.diagram.distribute(‘Bottom’, objects); this.diagram.distribute(‘BottomToTop’, objects); this.diagram.historyList.endGroupAction(); }

<ejs-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created”> Script

public created() {
    let diagram = $("#diagramContent").ejDiagram("instance");
    diagram.model.historyManager.pop();
}

HTML

<ej-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created”> Script

public created() {
    let entry = { object: node, prevState: node.employeeInfo };
    this.diagram.model.historyManager.push(entry);
    let value = { role: "New role" };
    node.employeeInfo = value;
}

HTML

<ejs-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”> Script

public nodes= [{ id: ‘node1’, offsetX: 100, offsetY: 100, width: 100, height: 100, }, { offsetX: 200, offsetY: 200, width: 100, height: 100, id: ‘node2’ }], public created() { let object = diagram.nodes[0]; object[‘description’] = (document.getElementById(‘custom’) as HTMLSelectElement).value; let entry: HistoryEntry = { undoObject: object }; this.diagram.historyList.push(entry); this.diagram.dataBind(); }

HTML

<ej-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”> Script

node.employeeInfo = args.prevState;

args.prevState = currentState;
}

<ejs-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”> Script

    let node1: NodeModel = this.diagram.nodes[0];

node1[‘customName’] = ‘customNode’; let entry = { undoObject: node1 }; this.diagram.historyList.push(entry); this.diagram.historyList.undo = function(args: HistoryEntry) { args.redoObject = cloneObject(args.undoObject) as NodeModel; args.undoObject[‘customName’] = ‘customNodeChange’; } this.diagram.historyList.redo = function(args: HistoryEntry) { let current: NodeModel = cloneObject(args.undoObject) as NodeModel; args.undoObject[‘customName’] = args.redoObject[‘customName’]; args.redoObject = current; } }

let diagram = $(“#diagramContent”).ejDiagram(“instance”); diagram.model.historyManager.redoStack();

HTML

<ej-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”> Script

public nodes= [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }] public created() { let diagram = $(“#diagramContent”).ejDiagram(“instance”); diagram.historyList.redoStack(); }

HTML

<ejs-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”> Script

public nodes= [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }] public created() { this.diagram.model.historyManager.stackLimit(); }

HTML

<ej-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”> Script

// Start to group the changes
this.diagram.widget.model.historyManager.startGroupAction();

//Makes the changes
for(let i =0;i<group.children.length;i++){
    let option = {};
    let item = group.children[i];
    // Updates the fillColor for all the child elements.
    option.fillColor = backgroundColor;
    this.diagram.widget.updateNode(item.name,option);
}

//Ends grouping the changes
this.diagram.widget.model.historyManager.closeGroupAction();

}

HTML

<ejs-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”> Script

public nodes= [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }] public created() { let objects: (NodeModel | ConnectorModel)[] = []; objects.push(this.diagram.nodes[0], this.diagram.nodes[1], this.diagram.connectors[0]); this.diagram.historyList.startGroupAction(); this.diagram.distribute(‘Top’, objects); this.diagram.distribute(‘Bottom’, objects); this.diagram.distribute(‘BottomToTop’, objects); this.diagram.historyList.endGroupAction(); } }

HTML

<ej-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created”> Script

node.employeeInfo = args.prevState;

args.prevState = currentState;
}

HTML

<ejs-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”> Script

public nodes = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }] this.historyManager: { undo: customUndoRedo, redo: customUndoRedo } public created() { let node1: NodeModel = this.diagram.nodes[0]; node1[‘customName’] = ‘customNode’; let entry = { undoObject: node1 }; this.diagram.historyList.push(entry); this.diagram.historyList.undo = function(args: HistoryEntry) { args.redoObject = cloneObject(args.undoObject) as NodeModel; args.undoObject[‘customName’] = ‘customNodeChange’; } this.diagram.historyList.redo = function(args: HistoryEntry) { let current: NodeModel = cloneObject(args.undoObject) as NodeModel; args.undoObject[‘customName’] = args.redoObject[‘customName’]; args.redoObject = current; } } }

HTML

<ej-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”> Script

public nodes = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }] this.historyManager: { undo: customUndoRedo, redo: customUndoRedo } public created() { let diagram = $(“#diagramContent”).ejDiagram(“instance”); diagram.model.historyManager.undoStack(); } } }

<ejs-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”> Script

public nodes = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }] this.historyManager: { undo: customUndoRedo, redo: customUndoRedo } public created() { this.diagram.historyList.undoStack(); }

<ejs-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”> Script

public nodes = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }] this.historyManager: { undo: customUndoRedo, redo: customUndoRedo } public created() { diagram.historyList.currentEntry(); }

<ejs-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”> Script

public nodes = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }] this.historyManager: { undo: customUndoRedo, redo: customUndoRedo } public created() { diagram.historyList.canUndo = true; }

HTML

<ejs-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”> Script

public nodes = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }] this.historyManager: { undo: customUndoRedo, redo: customUndoRedo } public created() { diagram.historyList.canUndo = true; }

HTML

<ej-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”> Script

public created() {
    let diagram = $("#diagramContent").ejDiagram("instance");
    diagram.model.historyManager.canLog();
}

HTML

<ejs-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”> Script

public created() {
    diagram.historyList.canLog = function (entry: HistoryEntry) {
    entry.cancel = true;
    return entry;
}
}

HTML

<ej-diagram id=“diagramCore” width=“1000” height=“600” [labelRenderingMode]=“svg” >

<ej-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout; this.layout = { bounds:{ x: 0, y: 0, width: 1000, height: 1000} };

<ejs-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout:object = { bounds: new Rect(0, 0, 500, 500) };

<ej-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout; this.layout = { fixedNode: “node” };

<ejs-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout:object = { fixedNode: ‘node’};

HTML

<ej-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout; constructor() { function getLayoutInfo(diagram, node, options) { options.orientation = “vertical”; options.type = “left”; }; this.layout = { getLayoutInfo: getLayoutInfo }; }

<ejs-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout:object = { getLayoutInfo: (node: Node, tree: TreeInfo) => { if (!tree.hasSubTree) { tree.orientation = ‘vertical’; } };

HTML

<ej-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout; constructor() { function getLayoutInfo(diagram, node, options) { options.orientation = “vertical”; options.type = “left”; }; this.layout = { getConnectorSegments:getConnectorSegment }; }

<ejs-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout:object = { connectorSegments: ‘Default’ };

HTML

<ej-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout; constructor() { this.layout = {layout: { horizontalSpacing: 50 }; }

<ejs-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout:object = { horizontalSpacing: 30 };

<ej-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout; constructor() { this.layout = { margin:{ left: 10, right: 10, top: 10, bottom: 10} }; }

<ejs-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout:object = { margin: { left: 50, top: 50, right: 0, bottom: 0 } };

<ej-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout; constructor() { this.layout = { horizontalAlignment:HorizontalAlignment.Center }; }

<ejs-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout:object = { horizontalAlignment: ‘Center’ };

<ej-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout; constructor() { this.layout = { verticalAlignment:VerticalAlignment.Center }; }

HTML

<ejs-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout:object = { verticalAlignment: ‘Center’ };

HTML

<ej-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout; constructor() { this.layout = { orientation: LayoutOrientations.LeftToRight }; }

<ejs-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout:object = { orientation: ‘TopToBottom’,} };

<ej-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout; constructor() { this.layout = { type: LayoutTypes.HierarchicalTree } };

<ejs-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout:object = { type: ‘OrganizationalChart’ }; };

<ej-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout;
constructor() {
    this.layout = { verticalSpacing: 50 }

};

<ejs-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout:object = { verticalSpacing: 30 }; };

<ej-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout; constructor() { this.layout = { root: ‘rootNode’ } };

<ejs-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout:object = { root: ‘rootNode’ }; };

<ej-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout;
constructor() {
    this.layout = { springFactor: 0.442 }

};

<ejs-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout:object = { type: ‘SymmetricalLayout’, springLength: 80, springFactor: 0.8, maxIteration: 500, }; };

<ej-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout;
constructor() {
    this.layout = { maxIteration: 442 }

};

<ejs-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout:object = { type: ‘SymmetricalLayout’, springLength: 80, springFactor: 0.8, maxIteration: 500, }; };

<ej-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout;
constructor() {
    this.layout = { springLength: 80 }

};

<ejs-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout:object = { type: ‘SymmetricalLayout’, springLength: 80, springFactor: 0.8, maxIteration: 500, }; };

HTML

<ejs-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout:object = { connectionDirection:‘Auto’, type: ‘SymmetricalLayout’, springLength: 80, springFactor: 0.8, maxIteration: 500, }; };

HTML

<ejs-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout:object = { enableAnimation: true, orientation: ‘TopToBottom’, type: ‘OrganizationalChart’, margin: { top: 20 }, horizontalSpacing: 30, verticalSpacing: 30, }; };

<ejs-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” > Script

public layout:object = { type: ‘MindMap’, }; };

<ej-diagram id=“diagramCore” width=“100%” height=“700px” [locale]=“es-ES”> js-diagram>

<ejs-diagram id=“diagramCore” width=“1000” height=“600” [locale]=“en-US” >

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “node1”, width: 175, height: 60, offsetX:100, offsetY:100}]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] =[ { offsetX: 250, offsetY: 250, width: 100, height: 100, }];

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ type: “bpmn”, shape: BPMNShapes.Activity, activity: BPMNActivity.SubProcess, width:50, height:50 }]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] =[ { offsetX: 250, offsetY: 250, width: 100, height: 100, shape: { type: ‘Bpmn’, shape: ‘Activity’, activity: { activity: ‘Task’ }, }, }];

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

let node1 = { name: "node1", addInfo: addInfo, offsetX:100, offsetY:100, width:50, height:50 };

let node2 = { type: "swimlane", name: "swimlane", addInfo: addInfo };
this.nodes = [node1, node2];

}

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] =[ { offsetX: 250, offsetY: 250, width: 100, height: 100, addInfo: { “borderColor”: “black”, “borderWidth”: ‘1px’ }, }];

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “node1”, width: 100, height:100, offsetX:50, offsetY:50, type:“bpmn”, shape: “activity”, annotation: { text: “This is a BPMN Activity shape”, width: 100, height: 50, angle: -45, length: 150, direction: “top” } }]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] =[ { offsetX: 250, offsetY: 250, width: 100, height: 100, shape: { type: ‘Bpmn’, shape: ‘DataObject’, dataObject: { collection: true, type: ‘Input’ }, annotations: [{ id: ‘left’, angle: 45, length: 150, text: ‘Left’, }] } }];

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes;
constructor() {
    this.nodes =  [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
    text: "This is a BPMN Activity shape", width: 100, height: 50,
    angle: -45
    }
}];
}

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] =[{ offsetX: 250, offsetY: 250, width: 100, height: 100, shape: { type: ‘Bpmn’, shape: ‘DataObject’, dataObject: { collection: true, type: ‘Input’ }, annotations: [{ id: ‘left’, angle: 45, }] } }];

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes;
constructor() {
    this.nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
    text: "This is a BPMN Activity shape", width: 100, height: 50,
    angle: -45, length: 150, direction: "top"
    }
}];
}

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes;
constructor() {
    this.nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
    text: "This is a BPMN Activity shape", width: 100, height: 50,
    }
}];
}

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] =[{ offsetX: 250, offsetY: 250, width: 100, height: 100, shape: { type: ‘Bpmn’, shape: ‘DataObject’, dataObject: { collection: true, type: ‘Input’ }, annotations: [{ id: ‘left’, text: ‘Left’, height: 50 }] } }];

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes;
constructor() {
    this.nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
    text: "This is a BPMN Activity shape", width: 100, height: 50,
    length: 150
    }
}];
}

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] =[{ offsetX: 250, offsetY: 250, width: 100, height: 100, shape: { type: ‘Bpmn’, shape: ‘DataObject’, dataObject: { collection: true, type: ‘Input’ }, annotations: [{ id: ‘left’, length: 150, text: ‘Left’, }] } }];

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “node1”, width: 100, height:100, offsetX:50, offsetY:50, type:“bpmn”, shape: “activity”, annotation: { text: “This is a BPMN Activity shape” } }]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] =[{ offsetX: 250, offsetY: 250, width: 100, height: 100, shape: { type: ‘Bpmn’, shape: ‘DataObject’, dataObject: { collection: true, type: ‘Input’ }, annotations: [{ text: ‘Left’, }] } }];

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “node1”, width: 100, height:100, offsetX:50, offsetY:50, type:“bpmn”, shape: “activity”, annotation: { text: “This is a BPMN Activity shape”, width: 100, height: 50 } }]; }

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] =[ { offsetX: 250, offsetY: 250, width: 100, height: 100, shape: { type: ‘Bpmn’, shape: ‘DataObject’, dataObject: { collection: true, type: ‘Input’ }, annotations: [{ id: ‘left’, width: 45, text: ‘Left’, }] } }];

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] =[{ offsetX: 250, offsetY: 250, width: 100, height: 100, shape: { type: ‘Bpmn’, shape: ‘DataObject’, dataObject: { collection: true, type: ‘Input’ }, annotations: [{ id: ‘left’, text: ‘Left’, }] } }];

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { let node1 = { name: “node1”, width: 50, height:50, offsetX:50, offsetY:50, borderColor: “red” , borderDashArray: “4,2”}; let node2 = { name: “node2”, width: 50, height:50, offsetX:150, offsetY:150, borderColor: “red” , borderDashArray: “4,2”}; let group = { name :“group”, children:[node1, node2], canUngroup: false }; this.nodes = [group]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

let group = { name :"group", children:[node1, node2]};
this.nodes =[group];

}

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [ group ]; public node1: NodeModel = { id: ‘node1’, offsetX: 250, offsetY: 250, width: 100, height: 100, }; public node2: NodeModel = { id: ‘node2’, offsetX: 450, offsetY: 450, width: 100, height: 100, }; public group: NodeModel = { id: ‘group’,children : [‘node1’, ‘node2’] };

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.Class }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.Class, “class”: { name: “Patient”, } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.Class, “class”: { name: “Patient”, } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.Class, “class”: { name: “Patient”, attributes: [{ name: “accepted”}] } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.Class, “class”: { name: “Patient”, attributes: [{ name: “accepted” }] } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.Class, “class”: { name: “Patient”, attributes: [{ name: “accepted”, type: “Date” }] } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.Class, “class”: { name: “Patient”, attributes: [{ name: “accepted”, type: “Date”, scope:“protected” }] } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes =[{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.Class, “class”: { name: “Patient”, methods: [{ name: “getHistory” }] } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.Class, “class”: { name: “Patient”, methods: [{ name: “getHistory”, arguments: [{name: “Date” }] }] } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.Class, “class”: { name: “Patient”, methods: [{ name: “getHistory”, arguments: [{ name: “Date”, type:“String” }] }] } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.Class, “class”: { name: “Patient”, methods: [ { name: “getHistory”, arguments: [ { name: “Date” } ], type: “History” }] } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.Class, “class”: { name: “Patient”, methods: [ { name: “getHistory”, arguments: [ { name: “Date” } ], type: “History” }] } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes =[{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.Class, “class”: { name: “Patient”, methods: [{ name: “getHistory”, arguments: [{name: “Date” }], type: “History” }] } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.Class, “class”: { name: “Patient”, methods: [{ name: “getHistory”, arguments: [{name: “Date” }], type: “History”, scope:“protected” }] } }]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “node”, width: 100, height: 100, offsetX: 100, offsetY: 100, collapseIcon: { shape:“ArrowUp”, width:10, height:10 }, expandIcon: { height: 10, width: 10, shape: “ArrowDown” } }]

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: “ArrowDown”, fill: ‘red’ }, collapseIcon: { height: 20, width: 20, shape: “ArrowUp” } }];

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “node”, width: 100, height: 100, offsetX: 100, offsetY: 100, collapseIcon: { shape:“ArrowUp”, width:10, height:10, borderColor: “red” }, expandIcon: { height: 10, width: 10, shape: “ArrowDown”, borderColor: “red” } }]

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: “ArrowDown”, borderColor: ‘red’ }, collapseIcon: { height: 20, width: 20, shape: “ArrowUp”, borderColor: ‘red’ } }];

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “node”, width: 100, height: 100, offsetX: 100, offsetY: 100, collapseIcon: { shape:“ArrowUp”, width:10, height:10, borderWidth: “2” }, expandIcon: { height: 10, width: 10, shape: “ArrowDown”, borderWidth: “2” } }]

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel [] = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: “ArrowDown”, borderWidth: ‘2’ }, collapseIcon: { height: 20, width: 20, shape: “ArrowUp”, borderWidth: ‘2’ } }];

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “node”, width: 100, height: 100, offsetX: 100, offsetY: 100, collapseIcon: { shape:“ArrowUp”, width:10, height:10, fillColor: “green” }, expandIcon: { height: 10, width: 10, shape: “ArrowDown”, fillColor: “green” } }]

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: “ArrowDown”, fill: ‘red’ }, collapseIcon: { height: 20, width: 20, shape: “ArrowUp”, fill: ‘red’ } }];

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “node”, width: 100, height: 100, offsetX: 100, offsetY: 100, collapseIcon: { shape:“ArrowUp”, width:10, height:10 }, expandIcon: { height: 10, width: 10, shape: “ArrowDown” } }]

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: “ArrowDown”, fill: ‘red’ }, collapseIcon: { height: 20, width: 20, shape: “ArrowUp” } }];

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “node”, width: 100, height: 100, offsetX: 100, offsetY: 100, collapseIcon: { shape:“ArrowUp”, width:10, height:10, horizontalAlignment:HorizontalAlignment.Left }, expandIcon: { height: 10, width: 10, shape: “ArrowDown”, horizontalAlignment:HorizontalAlignment.Left } }]

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: “ArrowDown”, horizontalAlignment:‘Center’ }, collapseIcon: { height: 20, width: 20, shape: “ArrowUp”, horizontalAlignment:‘Center’ } }]

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “node”, width: 100, height: 100, offsetX: 100, offsetY: 100, collapseIcon: { shape:“ArrowUp”, width:10, height:10, margin:{ left: 5 } }, expandIcon: { height: 10, width: 10, shape: “ArrowDown”, margin:{ left: 5 } } }]

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, , expandIcon: { height: 20, width: 20, shape: “ArrowDown”, fill: ‘red’, margin:{ left: 5 } }, collapseIcon: { height: 20, width: 20, shape: “ArrowUp”, margin:{ left: 5 } } }]

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “node”, width: 100, height: 100, offsetX: 100, offsetY: 100, collapseIcon: { shape:“ArrowUp”, width:10, height:10, offset:Point(0,0.5) }, expandIcon: { height: 10, width: 10, shape: “ArrowDown”, offset:Point(0,0.5) } }]

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: “ArrowDown”, offset: { x: 0, y: 0.5 } }, collapseIcon: { height: 20, width: 20, shape: “ArrowUp”, offset: { x: 0, y: 0.5 } } }];

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “node”, width: 100, height: 100, offsetX: 100, offsetY: 100, collapseIcon: { shape:“ArrowUp”, width:10, height:10 }, expandIcon: { height: 10, width: 10, shape: “ArrowDown” } }]

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, , expandIcon: { height: 20, width: 20, shape: “ArrowDown”, fill: ‘red’ }, collapseIcon: { height: 20, width: 20, shape: “ArrowUp” } }];

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “node”, width: 100, height: 100, offsetX: 100, offsetY: 100, collapseIcon: { shape:“ArrowUp”, width:10, height:10, verticalAlignment:VerticalAlignment.Top }, expandIcon: { height: 10, width: 10, shape: “ArrowDown”, verticalAlignment:VerticalAlignment.Top } }]

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, , expandIcon: { height: 20, width: 20, shape: “ArrowDown”, verticalAlignment: ‘Center’ }, collapseIcon: { height: 20, width: 20, shape: “ArrowUp”, verticalAlignment: ‘Center’ } }]

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: “Template”, content: ’’ + ’’ }, collapseIcon: { height: 20, width: 20, shape: “ArrowUp” } }]

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: “Path”, pathData: “M0,0 L0,100” }, collapseIcon: { height: 20, width: 20, shape: “Path”, pathData: “M0,0 L0,100” } }]

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, , expandIcon: { height: 20, width: 20, shape: “ArrowDown”, cornerRadius: 3}, collapseIcon: { height: 20, width: 20, shape: “ArrowUp”, cornerRadius: 3 } }]

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] =[{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: “ArrowDown”, padding: { left: 50 } }, collapseIcon: { height: 20, width: 20, shape: “ArrowUp”, padding: { left: 50 } } }]

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “node”, width: 100, height: 100, offsetX: 100, offsetY: 100, connectorPadding: 5 }]

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public NodeConstraints = NodeConstraints; public nodes: NodeModel[] = [{ name: “node”, width: 100, height: 100, offsetX: 100, offsetY: 100, constraints: NodeConstraints.Default & ~NodeConstraints.Select }]

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, constraints: NodeConstraints.Default | NodeConstraints.Select }]

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes;
constructor() {
    let node1 = {
name: "node1",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"

}; let node2 = { name: “node2”, width: 50, height: 50, borderColor: “red”, borderDashArray: “4,2” }; let group = { name: “group”, children: [node1, node2], container: { type: “stack” }, offsetX: 200, offsetY: 100 }; this.nodes = [group]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes;
constructor() {

let node1 = { name: “node1”, width: 50, height: 50, borderColor: “red”, borderDashArray: “4,2” }; let node2 = { name: “node2”, width: 50, height: 50, borderColor: “red”, borderDashArray: “4,2” }; let group = { name: “group”, children: [node1, node2], container: { type: “stack”, orientation: “horizontal” }, offsetX: 200, offsetY: 100 }; this.nodes = [group]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes;
constructor() {

let node1 = { name: “node1”, width: 50, height: 50, borderColor: “red”, borderDashArray: “4,2” }; let node2 = { name: “node2”, width: 50, height: 50, borderColor: “red”, borderDashArray: “4,2” }; let group = { name: “group”, children: [node1, node2], container: { type: ContainerType.Stack }, offsetX: 200, offsetY: 100 }; this.nodes = [group]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “node”, width: 100, height: 100, offsetX: 100, offsetY: 100, type:“basic”, shape:“rectangle”, cornerRadius:5 }]

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “node”, width: 100, height: 100, offsetX: 100, offsetY: 100, cssClass: “hoverNode” }]

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “dataObject”, type: “bpmn”, shape: BPMNShapes.DataObject, data: { type: BPMNDataObjects.Input }, width: 50, height: 50, offsetX: 100, offsetY: 100 }]

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ id: ‘node’, width: 100, height: 100, offsetX: 100, offsetY: 100, shape: { type: ‘Bpmn’, shape: ‘DataObject’, dataObject: { collection: false, type: ‘Input’ } } }]

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “dataObject”, type: “bpmn”, shape: BPMNShapes.DataObject, data: { type: BPMNDataObjects.Input, collection: false }, width: 50, height: 50, offsetX: 100, offsetY: 100 }]

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ id: ‘node’, width: 100, height: 100, offsetX: 100, offsetY: 100, shape: { type: ‘Bpmn’, shape: ‘DataObject’, dataObject: { collection: false, type: ‘Input’ } } }]

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “Enums”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.Enumeration, enumeration: { name: “AccountType”, } }]

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “Enums”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.Enumeration, enumeration: { name: “AccountType”, } }]

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “Enums”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.Enumeration, enumeration: { name: “AccountType”, members: [{ name: “CheckingAccount”}] } }]

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “Enums”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.Enumeration, enumeration: { name: “AccountType”, members: [{ name: “CheckingAccount”}] } }]

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “nodeEvent”, type: “bpmn”, shape: “event”, event: BPMNEvents.Intermediate, width: 50, height: 50 }]

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, shape: { type: ‘Bpmn’, shape: ‘Event’, event: { event: ‘Start’, trigger: ‘None’ } } }]

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “nodeEvent”, type: “bpmn”, shape: BPMNShapes.Event, trigger: BPMNTriggers.None, width: 50, height: 50 }]

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, shape: { type: ‘Bpmn’, shape: ‘Event’, event: { event: ‘Start’, trigger: ‘None’ } } }]

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes;
public layout;
constructor() {
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
excludeFromLayout: true
};

let node2 = {
name: "node2",
width: 50,
height: 50
};
let node3 = {
name: "node3",
width: 50,
height: 50
};
    this.nodes =  [node1, node2, node3];
    this.layout= {
    type: "HierarchicalTree"
}
}

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes” [layout]=“layout”> Script

public nodes: NodeModel[] = [{ id: ‘node’, offsetX: 100, offsetY: 100, width: 100, height: 100, excludeFromLayout: true, }, { id: ‘node1’, width: 70, height: 70, annotations: [{ content: ‘node1’ }] }, { id: ‘node2’, width: 70, height: 70, annotations: [{ content: ‘node2’ }] }; ] public layout:object = { type: ‘RadialTree’, }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes;
constructor() {
    let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
fillColor:"red"};
this.nodes =  [node1];
}

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ id: ‘node’, offsetX: 100, offsetY: 100, width: 100, height: 100, style: { fill: ‘red’ } }, ]

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes;
constructor() {
    this.nodes =  [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
type: "bpmn",
shape: "gateway" ,
gateway: BPMNGateways.Exclusive
}];
}

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ id: ‘node’, width: 100, height: 100, offsetX: 100, offsetY: 100, shape: { type: ‘Bpmn’, shape: ‘Gateway’, gateway: { type: ‘Exclusive’ } } }]

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { let gradient = { LinearGradient: { type: “linear”, x1: 0, x2: 50, y1: 0, y2: 50, stops: [ { color: “white”, offset: 0 }, { color: “red”, offset: 50 }] } }; let node1 = { name: “node1”, width: 50, height: 50, offsetX: 50, offsetY: 50, gradient: gradient }; this.nodes = [node1]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ id: ‘node’, width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient1 } }]; public stopsCol: StopModel[] = []; public stops1: StopModel = { color: ‘white’, offset: 0 }; stopsCol.push(stops1); public stops2: StopModel = { color: ‘red’, offset: 50 }; stopsCol.push(stops2); public gradient1: LinearGradientModel = { x1: 0, x2: 50, y1: 0, y2: 50, stops: stopsCol, type: ‘Linear’ };

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes;
constructor() {
let gradient = {
type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
{ color: "white", offset: 0}, { color: "red", offset: 50}]

}; let node1 = { name: “node1”, width: 50, height: 50, offsetX: 50, offsetY: 50, gradient : gradient }; this.nodes = [node1]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ id: ‘node’, width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient1 } }] public stopsCol: StopModel[] = []; public stops1: StopModel = { color: ‘white’, offset: 0 }; stopsCol.push(stops1); public stops2: StopModel = { color: ‘red’, offset: 50 }; stopsCol.push(stops2); public gradient1: LinearGradientModel = { x1: 0, x2: 50, y1: 0, y2: 50, stops: stopsCol, type: ‘Linear’ };

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes;
constructor() {
let gradient = {
LinearGradient:{
type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
{ color: "white", offset: 0}, { color: "red", offset: 50}]
}

}; let node1 = { name: “node1”, width: 50, height: 50, offsetX: 50, offsetY: 50, gradient : gradient }; this.nodes = [node1]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes;
constructor() {

let gradient = { LinearGradient:{ type: “linear”, x1: 0, x2: 50, y1: 0, y2: 50, stops: [ { color: “white”, offset: 0}, { color: “red”, offset: 50}] } }; let node1 = { name: “node1”, width: 50, height: 50, offsetX: 50, offsetY: 50, gradient : gradient }; this.nodes = [node1]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ id: ‘node’, width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient1 } }] public stopsCol: StopModel[] = []; public stops1: StopModel = { color: ‘white’, offset: 0 }; stopsCol.push(stops1); public stops2: StopModel = { color: ‘red’, offset: 50 }; stopsCol.push(stops2); public gradient1: LinearGradientModel = { x1: 0, x2: 50, y1: 0, y2: 50, stops: stopsCol, type: ‘Linear’ };

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes;
constructor() {

let gradient = { LinearGradient:{ type: “linear”, x1: 0, x2: 50, y1: 0, y2: 50, stops: [ { color: “white”, offset: 0}, { color: “red”, offset: 50}] }; let node1 = { name: “node1”, width: 50, height: 50, offsetX: 50, offsetY: 50, gradient : gradient }; this.nodes = [node1]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ id: ‘node’, width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient1 } }] public stopsCol: StopModel[] = []; public stops1: StopModel = { color: ‘white’, offset: 0 }; stopsCol.push(stops1); public stops2: StopModel = { color: ‘red’, offset: 50 }; stopsCol.push(stops2); public gradient1: LinearGradientModel = { x1: 0, x2: 50, y1: 0, y2: 50, stops: stopsCol, type: ‘Linear’ };

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes;
constructor() {
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
    RadialGradient:{
    type: "radial",
    fx: 50,
    fy: 50,
    cx: 50,
    cy: 50,
    stops: [{
        color: "white",
        offset: 0
    }, {
        color: "red",
        offset: 100
    }]
}
}

}; this.nodes = [node1]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public stops: StopModel[] = [{ color: ‘white’, offset: 0 }, { color: ‘red’, offset: 50 }]; public gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: ‘Radial’ }; public nodes: NodeModel[] = [{ id: ‘node’, width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient } }]

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { let node = { name: “node”, width: 50, height: 50, offsetX: 100, offsetY: 100, gradient: { RadialGradient:{ type: “radial”, fx: 50, fy: 50, cx: 50, cy: 50, stops: [{ color: “white”, offset: 0 }, { color: “red”, offset: 100 }] } } }; this.nodes = [node1]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ id: ‘node’, width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient } }]

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes;
constructor() {
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
    RadialGradient:{
    type: "radial",
    fx: 50,
    fy: 50,
    cx: 50,
    cy: 50,
    stops: [{
        color: "white",
        offset: 0
    }, {
        color: "red",
        offset: 100
    }]
}
}

}; this.nodes = [node1]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ id: ‘node’, width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient } }]

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “node”, width: 50, height: 50, offsetX: 100, offsetY: 100, gradient: { RadialGradient:{ type: “radial”, fx: 50, fy: 50, cx: 50, cy: 50, stops: [{ color: “white”, offset: 0 }, { color: “red”, offset: 100 }] } } }]; }

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ id: ‘node’, width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient } }]

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “node”, width: 50, height: 50, offsetX: 100, offsetY: 100, gradient: { RadialGradient:{ type: “radial”, fx: 50, fy: 50, cx: 50, cy: 50, stops: [{ color: “white”, offset: 0 }, { color: “red”, offset: 100 }] } } }]; }

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ id: ‘node’, width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient } }]

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [ { name: “node”, width: 50, height: 50, offsetX: 100, offsetY: 100, gradient: { RadialGradient:{ type: “radial”, fx: 50, fy: 50, cx: 50, cy: 50, stops: [{ color: “white”, offset: 0 }, { color: “red”, offset: 100 }] } } }]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ id: ‘node’, width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient } }]

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “node”, width: 50, height: 50, offsetX: 100, offsetY: 100, gradient: { RadialGradient:{ type: “radial”, fx: 50, fy: 50, cx: 50, cy: 50, stops: [{ color: “white”, offset: 0 }, { color: “red”, offset: 100 }] } } }]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ id: ‘node’, width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient } }]

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “node”, width: 50, height: 50, offsetX: 100, offsetY: 100, gradient: { RadialGradient:{ type: “radial”, fx: 50, fy: 50, cx: 50, cy: 50, stops: [{ color: “white”, offset: 0 }, { color: “red”, offset: 100 }] } } }]; }

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ id: ‘node’, width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient } }]

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “node”, width: 50, height: 50, offsetX: 100, offsetY: 100, gradient: { RadialGradient:{ type: “radial”, fx: 50, fy: 50, cx: 50, cy: 50, stops: [{ color: “white”, offset: 0 }, { color: “red”, offset: 100, opacity: 0.5 }] } } }]; }

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ id: ‘node’, width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient } }]

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ type: “swimlane”, name: “swimlane”, header: { text: “Swimlane”, fontSize: 12, bold: true } }]; }

<ej-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ name: “node”, width: 100, height: 100, offsetX: 100, offsetY: 100, }]

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }]

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes;
constructor() {

let node1 = { name: “node1”, width: 50, height: 50 }; let node2 = { name: “node2”, width: 50, height: 50, horizontalAlign: HorizontalAlignment.Right }; let group = { name: “group”, children: [node1, node2], container: { type: “canvas” }, offsetX: 200, offsetY: 100, minWidth: 200, minHeight: 200, fillColor: “red” }; this.nodes = [group]; }

let node = diagram.selectionList[0]; for(let i = 0; i < node.inEdges.length; i++){ console.log(node.inEdges[i]); };

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }]

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.interface }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.interface, “interface”: { name: “Patient”, } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.interface, “interface”: { name: “Patient”, attributes: [{ name: “accepted”}] } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes =[{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.interface, “interface”: { name: “Patient”, attributes: [{ name: “accepted” }] } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.interface, “interface”: { name: “Patient”, attributes: [{ name: “accepted”, type: “Date” }] } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.interface, “interface”: { name: “Patient”, attributes: [{ name: “accepted”, type: “Date”, scope:“protected” }] } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.interface, “interface”: { name: “Patient”, methods: [{ name: “getHistory” }] } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.interface, “interface”: { name: “Patient”, methods: [{ name: “getHistory”, arguments: [{name: “Date” }] }] } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.interface, “interface”: { name: “Patient”, methods: [{ name: “getHistory”, arguments: [{ name: “Date”, type:“String” }] }] } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.interface, “interface”: { name: “Patient”, methods: [ { name: “getHistory”, arguments: [ { name: “Date” } ], type: “History” }] } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.interface, “interface”: { name: “Patient”, methods: [ { name: “getHistory”, arguments: [ { name: “Date” } ], type: “History” }] } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.interface, “interface”: { name: “Patient”, methods: [{ name: “getHistory”, arguments: [{name: “Date” }], type: “History” }] } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “Patient”, offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: “black”, type: “UmlClassifier”, classifier: ClassifierShapes.interface, “interface”: { name: “Patient”, methods: [{ name: “getHistory”, arguments: [{name: “Date” }], type: “History”, scope:“protected” }] } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes;
constructor() {

let node2 = { name: “node2”, width: 50, height: 50 }; let connector = { sourceNode: “node1”, targetNode: “node2”, name: “connector” }; this.nodes = [node1, node2]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes” [connectors] = “connectors” [layout]= “layout”> Script

public nodes: NodeModel[] = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, id: ‘node1’, isExpanded: true, }, { id: ‘node2’, width: 50, height: 50 }] public connectors:ConnectorMode = [{ sourceNode: ‘node1’, targetNode: ‘node2’, id: ‘connector’ }] public layout: object = { type: “HierarchicalTree” }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ type: “swimlane”, name: “swimlane”, isSwimlane: true, header: { text: “Swimlane”, fontSize: 12, bold: true } }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “node”, width: 100, height: 100, offsetX: 100, offsetY: 100, labels: [ { text: “Label”, fontColor: “Red” } ] }]; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: ‘Annotation’ }] }]

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ type: “swimlane”, name: “swimlane”, offsetX: 300, offsetY: 200, lanes: [{ name: “lane1”, width: 200 }, { name: “lane2”, width: 100 } ] }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ type: “swimlane”, name: “swimlane”, offsetX: 300, offsetY: 200, lanes: [{ name: “lane1”, width: 200 }, { name: “lane2”, width: 100, cssClass:“hoverLane”, addInfo: addInfo, fillColor:“blue” } ] }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [ { type: “swimlane”, name: “swimlane”, offsetX: 300, offsetY: 200, lanes: [{ name: “lane1”, width: 200 }, { name: “lane2”, width: 100, header: { fillColor:“blue”, fontColor:“white”, text:“Function 1” } } ] }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ type: “swimlane”, name: “swimlane”, offsetX: 300, offsetY: 200, lanes: [{ name: “lane1”, width: 200, height: 200, zOrder:10 }, { name: “lane2”, width: 100 } ] }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ type: “swimlane”, name: “swimlane”, offsetX: 300, offsetY: 200, lanes: [{ name: “lane1”, width: 200 }, { name: “lane2”, width: 100, children:[{name:“process”, width: 50, height: 50 }] } ] }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ type: “swimlane”, name: “swimlane”, offsetX: 300, offsetY: 200, lanes: [{ name: “lane1”, width: 200, height: 200, isLane:true, orientation:“vertical” }, { name: “lane2”, width: 100 } ] }]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ type: “swimlane”, name: “swimlane”, offsetX: 300, offsetY: 200, lanes: [{ name: “lane1”, width: 200, children: [{ name: “process”, width: 50, height: 50, marginBottom: 50, marginLeft: 10, marginRight: 10, marginTop: 10 }] }] }]; }

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, margin : { left: 15, right: 15, top: 15, bottom: 15 } }]

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “node1”, width: 50, height: 50, offsetX: 50, offsetY: 50, maxHeight: 100, maxWidth: 100, minHeight: 10, minWidth: 10 }]; }

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] =[{ offsetX: 100, offsetY: 100, width: 100, height: 100, maxHeight: 100, maxWidth: 100, minHeight: 10, minWidth: 10 }]

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “node1”, width: 50, height: 50, offsetX: 50, offsetY: 50, }]; }

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ id: ‘node1’ offsetX: 100, offsetY: 100, width: 100, height: 100, }]

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { this.nodes = [{ name: “node1”, width: 50, height: 50, offsetX: 50, offsetY: 50, opacity: 0.5, rotateAngle: 70 }]; }

HTML

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”> Script

public nodes: NodeModel[] = [{ id: ‘node1’ offsetX: 100, offsetY: 100, width: 100, height: 100, rotateAngle: 70, style: { opacity: 0.5 } }]

<ej-diagram id=“diagramCore” width=“1000” height=“600” [nodes]=“nodes” > Script

public nodes; constructor() { let node1 = { name: “node1”, width: 50, height:50}; let node2 = { name: “node2”, width: 50, height:50, verticalAlign: “bottom”}; let group = { name :“group”, children:[ node1, node2 ], container: { type: “canvas” }, offsetX:200, offsetY:100, fillColor:“gray”, minWidth:200, minHeight:200, paddingBottom:10, paddingLeft:10, paddingRight:10, paddingTop:10 }; this.nodes = [group]; }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [pageSettings]=“pageSettings” > Script

public pageSettings; constructor() { this.pageSettings = { scrollableArea: { x:0, y:0, width:1000, height:1000} }; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [scrollSettings]=“scrollSettings”> Script

public scrollSettings: ScrollSettingsModel = { scrollableArea: new Rect(0, 0, 300, 300), }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [pageSettings]=“pageSettings” > Script

public pageSettings; constructor() { this.pageSettings = { boundaryConstraints: BoundaryConstraints.Diagram }; }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [pageSettings]=“pageSettings”> Script

public pageSettings: PageSettingsModel = { width: 800, height: 600, boundaryConstraints: ‘Diagram’ }

<ej-symbolpalette id=“symbolpalette” [palettes]=“palettes” width=“400px” height=“700px” > Script

public palettes= [{ name: “Basic Shapes”, expanded: true, items: [{ name: “Rectangle”, height: 40, width: 80, paletteItem: { previewWidth: 100, previewHeight: 100 } }] }]

<ejs-symbolpalette id=“symbolpalette” [expandMode]=true [palettes]=‘palettes’ width=“100%” height=“100%” [symbolHeight]=60 [symbolWidth]=60 [symbolMargin]=‘symbolMargin’ [getSymbolInfo]=‘getSymbolInfo’> Script

<ej-symbolpalette id=“symbolpalette” [palettes]=“palettes” width=“400px” height=“700px” > Script

public palettes= [{ name: “Basic Shapes”, expanded: true, items: [{ name: “Rectangle”, height: 40, width: 80, paletteItem: { previewWidth: 100, previewHeight: 100, enableScale:false } }] }]

<ejs-symbolpalette id=“symbolpalette” [expandMode]=true [palettes]=‘palettes’ width=“100%” height=“100%” [symbolHeight]=60 [symbolWidth]=60 [symbolMargin]=‘symbolMargin’> Script

<ej-symbolpalette id=“symbolpalette” [palettes]=“palettes” width=“400px” height=“700px” > Script

public palettes = [{ name: “Basic Shapes”, expanded: true, items: [{ name: “Rectangle”, height: 40, width: 80, paletteItem: { previewWidth: 100, previewHeight: 100, label: “label”, margin: { left: 4, right: 4, top: 4, bottom: 4 } } }] }]

<ejs-symbolpalette id=“symbolpalette” [expandMode]=true [palettes]=‘palettes’ width=“100%” height=“100%” [symbolHeight]=60 [symbolWidth]=60 [symbolMargin]=‘symbolMargin’ [getSymbolInfo]=‘getSymbolInfo’> Script

//Read the selected items for(let i =0; i< this.diagram.widget.model.selectedItems.children; i++){ //Do your actions here }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [selectedItems]=“selectedItems” > Script

public selectedItems; constructor() { this.selectedItems = { constraints: SelectorConstraints.UserHandles } }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [selectedItems]=“selectedItems”> Script

public selectedItems = { constraints: SelectorConstraints.UserHandle }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [selectedItems]=“selectedItems” > Script

public selectedItems; constructor() { this.selectedItems = { getConstraints: function() { return NodeConstraints.Drag | NodeConstraints.Resize } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [selectedItems]=“selectedItems” > Script

public selectedItems; constructor() { this.selectedItems = { height:100, width: 100, offsetX:100, offsetY: 100, rotateAngle: 90, } }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [selectedItems]=“selectedItems”> Script

public selectedItems = { height:100, width: 100, offsetX:100, offsetY: 100, rotateAngle: 90 }, }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [selectedItems]=“selectedItems” > Script

public selectedItems; constructor() { this.selectedItems = { tooltip : { alignment:{ vertical:“top” } } } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [selectedItems]=“selectedItems” > Script

public selectedItems; constructor() { this.selectedItems = { userHandles:userHandle } }

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [selectedItems]=“selectedItems”> Script

public handle: UserHandleModel[] = [{ name: ‘handle1’, pathData: ‘M 60.3,18 H 27.5 c -3,0-5.5,2.4-5.5,5.5 v 38.2 h 5.5 V 23.5 h 32.7 V 18 z M 68.5,28.9 h -30 c -3,0-5.5,2.4-5.5,5.5 v 38.2 c 0,3,2.4,5.5,5.5,5.5 h 30 c 3,0,5.5-2.4,5.5-5.5 V 34.4 C 73.9,31.4,71.5,28.9,68.5,28.9 z M 68.5,72.5 h -30 V 34.4 h 30 V 72.5 z’ , visible: true, backgroundColor: ‘black’, offset: 0, side: ‘Bottom’, margin: { top: 0, bottom: 0, left: 0, right: 0 }, pathColor: ‘white’ }]; public selectedItems = { constraints: SelectorConstraints.UserHandle, userHandles: this.handle }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [selectedItems]=“selectedItems” > Script

public selectedItems;
constructor() {
    let userHandle = [];
let cloneHandle = UserHandle();
cloneHandle = {name : "cloneHandle",

pathData : "M 4.6350084,4.8909971 L 4.6350084,9.3649971 9.5480137,9.3649971 9.5480137,4.8909971 z M 3.0000062,2.8189973 L 11.184016,2.8189973 11.184016,10.999997 3.0000062,10.999997 z M 0,0 L 7.3649998,0 7.3649998,1.4020001 1.4029988,1.4020001 1.4029988,8.0660002 0,8.0660002 0,1.4020001 0,0.70300276 z",

visible : "true",

backgroundColor : "#4D4D4D",

offset : point(0, 0),

position :" middleLeft",

margin : { left: 5 },

pathColor : "white",

horizontalAlignment : HorizontalAlignment.Right,
verticalAlignment : VerticalAlignment.Top,

borderColor : "red",
borderWidth : 3,

size : 20};

userHandle.push(cloneHandle);
this.selectedItems ={
    userHandles:userHandle
    }
}

<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [selectedItems]=“selectedItems”> Script

public handle: UserHandleModel[] = [{ name: ‘handle1’, pathData: ‘M 60.3,18 H 27.5 c -3,0-5.5,2.4-5.5,5.5 v 38.2 h 5.5 V 23.5 h 32.7 V 18 z M 68.5,28.9 h -30 c -3,0-5.5,2.4-5.5,5.5 v 38.2 c 0,3,2.4,5.5,5.5,5.5 h 30 c 3,0,5.5-2.4,5.5-5.5 V 34.4 C 73.9,31.4,71.5,28.9,68.5,28.9 z M 68.5,72.5 h -30 V 34.4 h 30 V 72.5 z’, visible: true, backgroundColor: ‘black’, offset: 0, side: ‘Bottom’, margin: { top: 0, bottom: 0, left: 0, right: 0 }, pathColor: ‘white’, horizontalAlignment: ‘Center’, verticalAlignment: ‘Center’, borderColor: ‘red’, borderWidth: 3, size: 30 }]; public selectedItems = { constraints: SelectorConstraints.UserHandle, userHandles: this.handle }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [selectedItems]=“selectedItems” > Script

public selectedItems;
constructor() {

function CloneTool(name) {
    base.call(this, name);
    this.singleAction = true;
    this.clonedNodes = [];
    this.cursor = "pointer";
}
CloneTool.prototype.mouseup = function(event) {
    this.diagram.copy();
    this.diagram.paste();
}

userHandle.push(cloneHandle); this.selectedItems = { userHandles: userHandle } }

<ej-diagram id=“diagramCore” width=“1000” height=“600” [selectedItems]=“selectedItems” > Script