Notes

//ts

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

import * as cytoscapeEdgehandles from 'cytoscape-edgehandles';
import * as popper from 'cytoscape-popper';

@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
//functions-defining
popperContent: any;
popperDiv: HTMLDivElement | undefined;
linkStartNode: any;
started: boolean = false;
linkDrawStart: ((var1: any) => void)
linkDrawEnd: (() => void)
eh: any;
linkDefaultSize: number = 10;


constructor() {
this.linkDrawStart = (var1: any) => {

this.eh.start(this.linkStartNode);

}



this.linkDrawEnd = () => {

this.eh.stop();

}
}


ele: any;

ngOnInit(): void {

//edgehandles

cytoscape.use(cytoscapeEdgehandles); // register extension
cytoscape.use(popper);
//defaults
let defaults = {
canConnect: function (sourceNode: { same: (arg0: any) => any; }, targetNode: any) {
// whether an edge can be created between source and target
return !sourceNode.same(targetNode); // e.g. disallow loops
},
edgeParams: function (sourceNode: any, targetNode: any) {
// for edges between the specified source and target
// return element object to be passed to cy.add() for edge
return {};
},
hoverDelay: 150, // time spent hovering over a target node before it is considered selected
snap: true, // when enabled, the edge can be drawn by just moving close to a target node (can be confusing on compound graphs)
snapThreshold: 50, // the target node must be less than or equal to this many pixels away from the cursor/finger
snapFrequency: 15, // the number of times per second (Hz) that snap checks done (lower is less expensive)
noEdgeEventsInDraw: true, // set events:no to edges during draws, prevents mouseouts on compounds
disableBrowserGestures: true // during an edge drawing gesture, disable browser gestures such as two-finger trackpad swipe and pinch-to-zoom
};




//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',
}
},
{
selector: '.eh-handle',
style: {
'background-color': '#D96383',
'width': 10,
'height': 10,
'shape': 'ellipse',
'overlay-opacity': 0,
'border-width': 10, // makes the handle easier to hit
'border-opacity': 0
}
},

{
selector: '.eh-hover',
style: {
'background-color': '#D96383'
}
},

{
selector: '.eh-source',
style: {
'border-width': 2,
'border-color': '#D96383'
}
},

{
selector: '.eh-target',
style: {
'border-width': 2,
'border-color': '#D96383'
}
},

// .eh-preview,
{
selector: '.eh-ghost-edge',
style: {
'background-color': '#D96383',
'line-color': '#D96383',
'target-arrow-color': '#D96383',
'source-arrow-color': '#D96383',
'target-arrow-shape': 'triangle',
'width': '3'
}
},
{
selector: '.eh-ghost-edge.eh-preview-active',
style: {
'opacity': 0
}
}

],
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' } }
]);

this.eh = this.ele.edgehandles(defaults);


this.ele.on('mouseover', 'node', (eventArg: { target: any; }) => {

this.setEdgeHandlePopper(eventArg.target)

this.enablePopperDrawMode();

})



this.ele.on('mouseout', 'node', (eventArg: any) => {

this.removeEdgeHandlePopper();

})


window.addEventListener('mouseup', () => { this.eh.stop(); })

this.ele.on('ehstart', () => {

this.started = true;

});



this.ele.on('ehstop', () => {

this.started = false;

});



this.ele.on('ehcomplete', (event: any, sourceNode: { id: () => any; data: (arg0: string) => any; }, targetNode: { id: () => any; data: (arg0: string) => any; }, addedEles: any[]) => {
this.ele.remove(addedEles[0]); // remove from cy directly
const actions = [];
actions.push({
name: 'add',

});
let param: any = {
group: 'edges',
classes: 'autorotate',
data: {
id: this.getGuid(),
source: sourceNode.id(),
target: targetNode.id(),
sourceName: sourceNode.data('name'),
targetName: targetNode.data('name'),
sourceType: sourceNode.data('type'),
targetType: targetNode.data('type'),
color: '#4a5b61',
shape: 'triangle',
size: this.linkDefaultSize,
relationship: '',
relationshipurl: '',
linktype: 'USER',
documentName: '',
documentID: '',
// customProperties: new Array<KeyValuePair>()
},
}
this.ele.add(param);

});




}
//functions
removeEdgeHandlePopper() {

if (this.popperContent) {

this.popperContent.destroy();

this.popperContent = null;

}

if (this.popperDiv) {

let div = document.getElementById("new")

div?.removeChild(this.popperDiv);

this.popperDiv = undefined;

}

this.linkStartNode = null;

}


setEdgeHandlePopper(startNode: any): void {

if (!this.started) {

this.linkStartNode = startNode;

this.popperDiv = document.createElement('div');

this.popperDiv.classList.add('popper-handle');

this.popperDiv.addEventListener('mousedown', this.linkDrawStart);

let boardContainer = document.getElementById("new")


boardContainer?.appendChild(this.popperDiv);



this.popperContent = this.linkStartNode.popper({

content: this.popperDiv,

popper: {

placement: 'top',

modifiers: [

{

name: 'offset',

options: {

offset: [0, -5],

},

},

]

}

});

}

}



enablePopperDrawMode() {

}

getGuid() {

return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c: any) => {

const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);

return v.toString(16);

});

}




//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
};
});

}
//maxzoom
maxzoom() {
this.ele.zoom({
level: 3.0,
renderedPosition: {
x: 0,
y: 0,
},
});

}


}






//html
<button type="button" (click)="zoom()">zoom</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)="maxzoom()">maxzoom</button>

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

//css
.multiple{
width: 700px;
height: 700px;
background-color: antiquewhite;
}
html,
body {
font-family: sans-serif;
}


//styles.css
/* You can add global styles to this file, and also import other style files */
.popper-handle {

width: 15px;

height: 15px;

background: black;

border-radius: 20px;

z-index: 9999;

}