Issue with cytoscape-edgehandles , wrong handlePositions

[mafar]

Dear Devs,
I am using cytoscape-grid-guide && cytoscape-edgehandles together.
Even though I have set handlePosition: "middle top", in cy.edgehandles but
handles are displayed at wrong position on hover, node selected.

1. If i disable cy.gridGuide() , cy.edgehandles seem to work fine
2. Node size and grid spacing seem to effect this behaviour too. Node size width,height 80,80 and grid spacing 100 would yield different handle position
3. For very first time when i hover on node, handlePosition, appears at node center while i set it as handlePosition: "middle top", in cy.edgehandles

Code Pen Demo:
https://codepen.io/mafar/pen/JjYqvVp?editors=0010

ISSUE (Animated GIF):
See how handlePosition, offsets

**ISSUE , First Hover node , handlePosition, appears at node center **

[hasanbalci]

@mafar It needs further investigation, but my first observation is that this problem doesn't occur when snapToGridOnRelease option is set to false. You can try this until the real reason of the issue is found and the issue is fixed if this option isn't necessary for your case.

[mafar]

@hasanbalci
snapToGridOnRelease :false works.
My guess is that extra node generated by edge handles also gets snapToGridOnRelease : true treatment

Providing an option in cytoscape.js-grid-guide to filter nodes like
handleNodes: 'node', // selector/filter function for whether edges can be made from a given node
from cytoscape.js-edgehandles wil lbe helpful here which can be called internally to skip node generated by edge-handles so that they dont get treatment of geometricGuidelines and snapping from cytoscape.js-grid-guide

handleNodes: 'node', can be good option to provide as some other plugins may also generate extra nodes and someone would want them to skip grid options like snapping, geometricGuidelines etc provided by this plugin.

[mafar]

it seems following must be added

if (cyTarget.hasClass('eh-handle') ||cyTarget.hasClass('eh-ghost')  ||cyTarget.hasClass('eh-ghost-node') ){
              return false;
}

at places like

1. snap_during_drag.js
2. snap_on_release.js
3. resize.js
4. alignment.js

So that edgesHandles Nodes dont receieve treatment from cytoscape.js-grid-guide

[mafar]

Dear Devs,
It will be helpful to have functionality of handleNodes option so that desired nodes can be filtered to avoid Snapping and resize by this plugin

//https://github.com/cytoscape/cytoscape.js-edgehandles/blob/master/cytoscape-edgehandles.js
  var userFilter = function userFilter(el) {
    return el.filter(options.handleNodes).length > 0;
  };

Becuase in my use case there are some parent Nodes that I dont want to snap to grid or resize.
Please this is a must have feature.

[canbax]

@mafar Please check the new commit on the unstable version. It should work for your case