scripts/cyto.html

<!DOCTYPE html>
<html>

<head>
    <title>Cytoscape PRV19 Dependtest</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://htlib/htlib/fontawesome/last/css/all.min.css" rel="stylesheet" type="text/css" />

    <script src="http://htlib/htlib/jquery/jquery-3.4.1.js"></script>
    <script src="http://htlib/htlib/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
    <script src="http://htlib/htlib/cytoscape/last.js"></script>
    <script src="http://htlib/htlib/lodash/4.17.15/lodash.js"></script>
    <script src="http://htlib/htlib/cytoscape/ext/edgehandles/3.6.0/cytoscape-edgehandles.js"></script>
    <script src="http://htlib/htlib/cytoscape/ext/cxtmenu/3.1.1/cytoscape-cxtmenu.js"></script>
    <script src="http://htlib/htlib/dagre/0.7.3/dagre.min.js"></script>
    <script src="http://htlib/htlib/cytoscape/ext/dagre/2.2.1/cytoscape-dagre.js"></script>
</head>

<body>

    <style>
        #cy {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            z-index: 999;
        }
    </style>

    <div id="cy">

    </div>

    <script>
        $(document).ready(function () {
            var cy;
            var isgood = true;

            $.get('http://intra/prv19/rest/depend_by_pid_for_cyto/7958', function (res) {
                console.log(res.data)
                cy = cytoscape({
                    container: $('#cy'), // container to render in
                    elements: res.data,
                    style: [ // the stylesheet for the graph
                        {
                            selector: 'node[label]',
                            style: {
                                "font-size": "4px",
                                'text-valign': 'center',
                                'text-halign': 'center',
                                'width': function (d) {
                                    return parseInt(d._private.data.label.length * 3)
                                },
                                'height': 13,
                                'shape': 'roundrectangle',
                                'background-color': '#32db32',
                                'label': 'data(label)'
                            }
                        },
                        {
                            selector: 'edge',
                            style: {
                                'curve-style': function (d) {
                                    var curst = 'bezier';
                                    if (d._private.data.source == d._private.data
                                        .target) {
                                        curst = 'loop';
                                    }
                                    return curst;

                                },
                                'target-arrow-shape': 'triangle-backcurve',
                                'target-arrow-color': 'data(color)',
                                'line-color': 'data(color)',
                                'width': 0.5,
                                'arrow-scale': 0.5,
                            }
                        }, {
                            selector: '.eh-handle',
                            style: {
                                'background-color': 'red',
                                'width': 12,
                                'height': 12,
                                'shape': 'ellipse',
                                'overlay-opacity': 0,
                                'border-width': 12, // makes the handle easier to hit
                                'border-opacity': 0
                            }
                        },
                        {
                            selector: '.eh-hover',
                            style: {
                                'background-color': 'red'
                            }
                        },

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

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

                        {
                            selector: '.eh-preview, .eh-ghost-edge',
                            style: {
                                'background-color': 'red',
                                'line-color': 'red',
                                'target-arrow-color': 'red',
                                'source-arrow-color': 'red'
                            }
                        },

                        {
                            selector: '.eh-ghost-edge.eh-preview-active',
                            style: {
                                'opacity': 0
                            }
                        }
                    ],

                    layout: {
                        name: 'dagre',
                    }

                });
                cy.cxtmenu({
                    selector: 'node', //, edge

                    commands: [{
                            content: '<span class="fas fa-bolt fa-2x"></span>',
                            select: function (ele) {
                                console.log(ele.id());
                            }
                        },

                        {
                            content: '<span class="fas fa-star fa-2x"></span>',
                            select: function (ele) {
                                console.log(ele.data('name'));
                            },
                            enabled: true
                        },

                        {
                            content: '<span class="fas fa-trash fa-2x"></span>',
                            select: function (ele) {
                                cy.remove(ele);
                                console.log(ele.position());
                            }
                        }
                    ]
                });

                cy.cxtmenu({
                    selector: 'edge',
                    commands: [{
                        content: '<span class="fas fa-trash fa-2x"></span>',
                        select: function (ele) {
                            cy.remove(ele);
                            //console.log(ele.position());
                        }
                    }, {
                        content: 'gut',
                        select: function (ele) {
                            // cy.$('node:selected').connectedEdges().style( { 'line-color' : 'black' });
                            // cy.remove(ele);
                            console.log(ele.data());
                        }
                    }, {
                        content: 'schlecht',
                        select: function (ele) {
                            // cy.remove(ele);
                            //console.log(ele.position());
                        }
                    }]
                });

                cy.cxtmenu({
                    selector: 'core',

                    commands: [{
                        content: 'neuen Arbeitsgang anlegen',
                        select: function () {
                            console.log('bg1');
                        }
                    }]
                });

                var eh = cy.edgehandles({
                    snap: false,
                    hoverover: function (sourceNode, targetNode) {
                        var fromid = sourceNode._private.data.id;
                        var toid = targetNode._private.data.id;
                        var edges = targetNode._private.edges;

                        isgood = true;
                        for (var i in edges) {
                            var s = edges[i]._private.data.source;
                            var t = edges[i]._private.data.target;

                            if (s == fromid && t == toid) {
                                isgood = false;
                            }
                        }
                        console.log(isgood)
                    },
                    loopAllowed: function (node) {
                        // for the specified node, return whether edges from itself to itself are allowed
                        return true;
                    },
                    complete: function (sourceNode, targetNode, addedEles) {
                        if (isgood == false) {
                            cy.remove(addedEles);
                            return;
                        }
                        // einfügen
                    },
                });
            })
        })
    </script>

</body>

</html>