main.js

document.addEventListener('DOMContentLoaded', function () {
    let selected_color = '#666666';
    let white = '#ffffff';
    let cy = cytoscape({

        // container: $('#cy'), // container to render in
        container: document.getElementById('cy'), // container to render in

        elements: [ // list of graph elements to start with
            { // node a
                data: {id: 'a', name: 'a1', content: 'a1'}
            },
            { // node b
                data: {id: 'b', name: 'b1', content: 'b1'}
            },
            { // edge ab
                data: {id: 'ab', source: 'a', target: 'b'}
            }
        ],

        style: [ // the stylesheet for the graph
            {
                selector: 'node',
                style: {
                    'text-valign': 'center',
                    'color': 'white',
                    'width': 200,
                    'height': 40,
                    'shape': 'roundrectangle',
                    'label': `data(name)`

                }
            },
            // {
            //     selector: 'node:selected',
            //     style: {
            //         'border-width': 3,
            //         'border-color': selected_color
            //
            //     }
            // },

            {
                selector: 'edge',
                style: {
                    'width': 3,
                    'line-color': '#ccc',
                    'target-arrow-color': '#ccc',
                    'target-arrow-shape': 'triangle'
                }
            },
            {
                selector: '.eh-handle',
                style: {
                    'background-color': selected_color,
                    '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': selected_color
                }
            },
            {
                selector: '.eh-source',
                style: {
                    'border-width': 2,
                    'border-color': selected_color
                }
            },
            {
                selector: '.eh-target',
                style: {
                    'border-width': 2,
                    'border-color': selected_color
                }
            },
            {
                selector: '.eh-preview, .eh-ghost-edge',
                style: {
                    'background-color': selected_color,
                    'line-color': selected_color,
                    'target-arrow-color': selected_color,
                    'source-arrow-color': selected_color
                }
            },
            {
                selector: '.eh-ghost-edge .eh-preview-active',
                style: {
                    'opacity': 0
                }
            }
        ],

        layout: {
            name: 'grid',
            rows: 1
        }

    });

    cy.clipboard();

    let options = {
        // List of initial menu items
        menuItems: [
            {
                id: 'remove', // ID of menu item
                content: 'remove', // Display content of menu item
                tooltipText: 'remove', // Tooltip text for menu item
                selector: 'node, edge',
                onClickFunction: function (event) { // The function to be executed on click
                    let target = event.target || event.cyTarget;
                    target.remove();
                    $('#' + target.id()).remove();
                },
                disabled: false, // Whether the item will be created as disabled
                hasTrailingDivider: true, // Whether the item will have a trailing divider
                coreAsWell: false // Whether core instance have this item on cxttap
            },
            {
                id: 'selected', // ID of menu item
                content: 'selected', // Display content of menu item
                tooltipText: 'selected', // Tooltip text for menu item
                selector: 'node',
                onClickFunction: function (event) { // The function to be executed on click

                    let new_node = cy.add({
                        group: "nodes",
                        data: {
                            id: 'kashk',
                            name: 'kashk',
                            root: 'kashk',
                            weight: 75,
                            content: 'kashk'
                        },
                        position: event.position
                    });

                    console.log(cy.nodes().filter(ele => ele.selected()));
                    cy.nodes().filter(ele => ele.selected()).move({parent: 'kashk'});

                    console.log(cy.nodes().filter(ele => ele.selected()).parent());
                },
                disabled: false, // Whether the item will be created as disabled
                hasTrailingDivider: true, // Whether the item will have a trailing divider
                coreAsWell: false // Whether core instance have this item on cxttap
            },
        ]
    };
    var instance = cy.contextMenus(options);
    cy.edgehandles({snap: true});


    cy.on('tap', function (event) {
        let evtTarget = event.target;
        if (evtTarget === cy) {
            let new_node = cy.add({
                group: "nodes",
                data: {
                    name: 'a',
                    root: 'a',
                    weight: 75,
                    content: 'a'
                },
                position: event.position
            });
        }
    });

    var i = 0;

    cy.on('cxttap', 'node', function (event) {
        if (i % 2){
            instance.hideMenuItem('remove');
        }
        else {
            instance.showMenuItem('remove');
        }
        i++;
    });

    function inside(n, mp) {
        let {x1, x2, y1, y2, ...rest} = n.renderedBoundingBox();
        let [mpx, mpy] = [mp.clientX, mp.clientY];
        return (mpx > x1 && mpx < x2 && mpy > y1 && mpy < y2);
    }

    cy.on('mouseup', 'node', function (event) {
        let parents = cy.nodes(ele => ele.isParent());
        let new_parent = parents.filter(n => inside(n, event.originalEvent));

        if (new_parent.length > 0) {
            let id = cy.nodes(new_parent).min(() => this.height() * this.width()).ele.id();
            if (event.target.parent().id() !== id) {
                event.target.move({parent: id});
            }
        }
    });

});