when using with cytoscape.js-grid-guide, handle is not shown

[rohitranjan1991]

When using the grid from "cytoscape.js-grid-guide" with this library, the handle is not shown. Can someone please help me on this. Thanks :-) @maxkfranz

initGraph() {
        var cyDiv = this.shadowRoot.getElementById('cy');
        this.cy = cytoscape({
            container: cyDiv,
            zoomingEnabled: false,
            layout: {
                name: 'grid',
                rows: 2,
                cols: 2
            },

            style: [
                {
                    "selector": ".center-center",
                    "style": {
                        "text-valign": "center",
                        "text-halign": "center"
                    }
                },
                {
                    selector: 'node[name]',
                    css: {
                        'content': 'data(name)',

                        // 'shape': 'round-rectangle',
                    }
                },

                {
                    selector: 'edge',
                    style: {
                        'curve-style': 'bezier',
                        'target-arrow-shape': 'triangle'
                    }
                },

            // some style for the extension

                {
                    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': 'blue',
                        'line-color': 'red',
                        'target-arrow-color': 'red',
                        'source-arrow-color': 'red'
                    }
                },

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

            ],

            elements: {
                nodes: [
                ],
                edges: [

                ]
            }
        });

        var that  = this
        this.edgeHandlers = this.cy.edgehandles({
            // handlePosition: function (node) {
            //     // console.log(node);
            //     return 'right middle'
            // },
            show: function( sourceNode ){
                console.log(sourceNode);
                // that.edgeHandlers.start(sourceNode);
              }
        });

        // demo your core ext
        this.cy.gridGuide({
            centerToEdgeAlignment: true
        //     guidelinesStyle: {
        //         strokeStyle: "black",
        //         horizontalDistColor: "#ff0000",
        //         verticalDistColor: "green",
        //         initPosAlignmentColor: "#0000ff",
        //     }
        });

    }

I am adding the nodes programatically like this

 this.shadowRoot.getElementById('actionDialog').close();
        this.cy.add({
            group: 'nodes',
            data: { id: Date.now(), label: action, type: 'action', name: action, config: {} },
            position: { x: 300, y: 200 },
            // classes: 'center-center'
        });

[rohitranjan1991]

NeverMind. Got the issue. If I just disable "snapToGridOnRelease" in the cytoscape.js-grid-guide plugin, it works.

this.cy.gridGuide({
        snapToGridOnRelease:false
});