Notes

import { Component, OnInit } from '@angular/core';
import * as cytoscape from 'cytoscape';

@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {


constructor() { }


ele: any;

ngOnInit(): void {
//generating nodes
this.ele = cytoscape({
container: document.getElementById('multipleids'),

elements: [
{
//nodes
data: {
id: 'node1',
name: "1",
faveColor: "red",
faveShape: 'rectangle',
faveColor1: "green"


}
},
{
data: {
id: 'node2',
name: "2",
faveColor1: "green",
faveShape: 'rectangle',
}
},
{
data: {
id: 'node3',
name: "3",
faveColor: "red", faveShape: "circle",
}
},
{
data: {
id: 'node4',
name: "4", faveColor: "red",
faveColor1: "green", faveShape: 'triangle',

}
},
{
data: {
id: 'node5',
name: "5",
faveColor: "pink", faveShape: 'rectangle',
}
},
{
data: {
id: 'node6',
name: "6", faveColor: "green", faveShape: 'hexagon'

}
},
{
data: {
id: 'node7', name: "7", faveColor: "red", faveShape: 'ellipse'
}
},
{
data: {
id: 'node8', name: "8", faveShape: 'ellipse'
}
},
{
data: {
id: 'node9', name: "9", faveColor: "pink", faveShape: 'ellipse'
}
},
{
data: {
id: 'node10', name: "10", faveColor: "red", faveShape: 'ellipse'
}
},
{
data: {
id: 'node11', name: "11", faveColor: "red", faveColor1: "green", faveShape: 'ellipse'
}
},
{
data: {
id: 'node12', name: "12", faveColor1: "green", faveShape: 'pentagon'
}
},
{
data: { id: 'node13', name: "13", faveColor1: "green", faveShape: 'circle' }
},
{
data: { id: 'node14', name: "14", faveColor: "red", faveColor1: "black", faveShape: 'circle' }
},
{
data: { id: 'node15', name: "15", faveColor: "yellow", faveColor1: "orange", faveShape: 'circle' }
},
{
data: { id: 'node16', name: "16", faveShape: 'hexagon' }
},
{
data: { id: 'node17', name: "17", faveColor: "yellow", faveColor1: "orange", faveShape: 'hexagon' }
},
{
data: { id: 'node18', name: "18", faveColor: "pink", faveShape: 'hexagon' }
},
{
data: { id: 'node19', name: "19", faveColor: "red", faveColor1: "yellow" }
},
{
data: { id: 'node20', name: "20", faveColor: "pink", faveColor1: "red", faveShape: 'pentagon' }
},


{
//edges
data: { id: 'node1node2', source: 'node1', target: 'node2', faveColor: "#6FB1FC" }
},
{ data: { id: 'node2node3', source: 'node2', target: 'node3' } },
{ data: { id: 'node3node4', source: 'node3', target: 'node4', faveColor: "orange" } },
{ data: { id: 'node4node5', source: 'node4', target: 'node5' } },
{ data: { id: 'node5node6', source: 'node5', target: 'node6', faveColor: "orange" } },
{ data: { id: 'node6node7', source: 'node6', target: 'node7' } },
{ data: { id: 'node7node8', source: 'node7', target: 'node8', faveColor: "black" } },
{ data: { id: 'node8node9', source: 'node8', target: 'node9' } },
{ data: { id: 'node9node10', source: 'node9', target: 'node10' } },
{ data: { id: 'node10node11', source: 'node10', target: 'node11', faveColor: "black" } },
{ data: { id: 'node11node12', source: 'node11', target: 'node12' } },
{ data: { id: 'node12node13', source: 'node12', target: 'node13', faveColor: "orange" } },
{ data: { id: 'node13node14', source: 'node13', target: 'node14' } },
{ data: { id: 'node14node15', source: 'node14', target: 'node15', faveColor: "#6FB1FC" } },
{ data: { id: 'node15node16', source: 'node15', target: 'node16' } },
{ data: { id: 'node16node17', source: 'node16', target: 'node17', faveColor: "black" } },
{ data: { id: 'node17node18', source: 'node17', target: 'node18' } },
{ data: { id: 'node18node19', source: 'node18', target: 'node19', faveColor: "#6FB1FC" } },
{ data: { id: 'node19node20', source: 'node19', target: 'node20' } },
{ data: { id: 'node1node5', source: 'node1', target: 'node5', faveColor: "black" } },
{ data: { id: 'node10node20', source: 'node10', target: 'node20' } },
{ data: { id: 'node8node10', source: 'node8', target: 'node10', faveColor: "black" } },
{ data: { id: 'node10node19', source: 'node10', target: 'node19' } },
{ data: { id: 'node17node12', source: 'node17', target: 'node12', faveColor: "#6FB1FC" } },
{ data: { id: 'node1node13', source: 'node1', target: 'node13' } },
{ data: { id: 'node6node14', source: 'node6', target: 'node14' } },
{ data: { id: 'node4node15', source: 'node4', target: 'node15', faveColor: "orange" } },

{ data: { id: 'node13node4', source: 'node13', target: 'node4', faveColor: "black" } },
{ data: { id: 'node14node5', source: 'node14', target: 'node5' } },
{ data: { id: 'node15node6', source: 'node15', target: 'node6' } },
{ data: { id: 'node2node7', source: 'node2', target: 'node7', faveColor: "black" } },
{ data: { id: 'node7node1', source: 'node7', target: 'node1' } },
{ data: { id: 'node8node18', source: 'node8', target: 'node18', faveColor: "#6FB1FC" } },
{ data: { id: 'node7node3', source: 'node7', target: 'node3' } },
{ data: { id: 'node7node12', source: 'node7', target: 'node12', faveColor: "orange" } },
{ data: { id: 'node17node2', source: 'node17', target: 'node2' } },
{ data: { id: 'node12node16', source: 'node12', target: 'node16', faveColor: "#6FB1FC" } },

],
style: [ // the stylesheet for the graph
{
selector: 'node',
style: {

'label': 'data(name)', //content or label
'color': 'data(faveColor1)',
// 'background-color': 'yellow',
'background-color': 'data(faveColor)',
'text-valign': 'center',
// 'shape': 'hexagon',

'shape': (node: any) => { return node.data('faveShape'); }, //callback func
},

},
{
selector: 'edge',
style: {
'width': 3,
'line-color': 'data(faveColor)',
'target-arrow-color': 'green',

'target-arrow-shape': 'triangle',
'source-arrow-shape': 'diamond',
"source-arrow-color": "blue",

'curve-style': 'bezier',
}
}
],
layout: {
name: 'random',//grid random,preset,grid,circle,concentric,breadthfirst,cose
rows: 3 //columns?
}




})

//adding nodes
var ele = this.ele.add([
{ group: 'nodes', data: { id: 'n0' }, position: { x: 10, y: 10 } },
{ group: 'nodes', data: { id: 'n1' }, position: { x: 30, y: 70 } },
{ group: 'edges', data: { id: 'e0', source: 'n0', target: 'n1' } }
]);



}
//add nodes
add() {
this.ele.add({
group: 'nodes',
data: { weight: 80 },
position: { x: 200, y: 200 }
});

}


//remove
remove() {
var j = this.ele.$('id');
this.ele.remove('id');


}
//zoom out
zoom() {
this.ele.animate({
pan: { x: 100, y: 100 },
zoom: 2
}, {
duration: 1000
});
}

//fit
fit() {
this.ele.fit(this.ele.$())

}
//pan

pan() {
this.ele.pan({
x: 300,
y: 300
});

console.log(this.ele.pan()); // prints { x: 100, y: 100 }
}
//pan by
//pan the graph 100pixels to the right
panby() {
this.ele.panBy({
x: 100,
y: 0
});
}

//reset
reset() {
this.ele.reset()

}
//viewport
viewport() {
this.ele.viewport({
zoom: 2,
pan: { x: 100, y: 100 }
});
}
//delay
delay() {

this.ele.animate({
fit: { eles: 'data' } //eles=a collection of one or more elements (nodes and edges)
})

.delay(1000)

.animate({
fit: { eles: 'data' }
})
;

}
//nodesposition
nodesposition() {
this.ele.nodes().positions(function (node: any, i: number) {
return {
x: i * 100,
y: 100
};
});

}
//grabify
grabify() {
this.ele.$().grabify();

}
//animatenodes
animatenodes() {
this.ele.nodes().animate({
position: { x: 100, y: 100 },
style: { backgroundColor: 'red' }
}, {
duration: 1000
});

console.log('Animating nodes...');
}


}








<button type="button" (click)="zoom()">zoomout</button>
<button type="button" (click)="add()">addnodes</button>
<button type="button" (click)="remove()">Removenodes</button>
<button type="button" (click)="fit()">fit</button>
<button type="button" (click)="pan()">pan</button>
<button type="button" (click)="panby()">panby</button>
<button type="button" (click)="reset()">reset</button>
<button type="button" (click)="viewport()">viewport</button>
<button type="button" (click)="delay()">delay</button>
<button type="button" (click)="nodesposition()">nodesposition</button>
<button type="button" (click)="grabify()">grabify</button>
<button type="button" (click)="(animatenodes)">animatenodes</button>

<div class="multiple" id="multipleids"></div>