Option to customize right click event

[zoulayabd]

Thanks for your help earlier!

we need to open context menu of edges by left click event , and we would like to have an option evtType to customise cxttap event

cytoscape.js-edge-editing/src/UIUtilities.js

Lines 1286 to 1367 in 149c0aa

	cy.on('cxttap', eCxtTap = function (event) {
	var target = event.target || event.cyTarget;
	var targetIsEdge = false;
	try{
	targetIsEdge = target.isEdge();
	}
	catch(err){
	// this is here just to suppress the error
	}
	var edge, type;
	if(targetIsEdge){
	edge = target;
	type = anchorPointUtilities.getEdgeType(edge);
	}
	else{
	edge = anchorManager.edge;
	type = anchorManager.edgeType;
	}
	var menus = cy.contextMenus('get'); // get context menus instance
	if(!edgeToHighlight || edgeToHighlight.id() != edge.id() || anchorPointUtilities.isIgnoredEdge(edge) ||
	edgeToHighlight !== edge) {
	menus.hideMenuItem(removeBendPointCxtMenuId);
	menus.hideMenuItem(addBendPointCxtMenuId);
	menus.hideMenuItem(removeControlPointCxtMenuId);
	menus.hideMenuItem(addControlPointCxtMenuId);
	return;
	}
	var cyPos = event.position || event.cyPosition;
	var selectedIndex = getContainingShapeIndex(cyPos.x, cyPos.y, edge);
	// not clicked on an anchor
	if (selectedIndex == -1) {
	menus.hideMenuItem(removeBendPointCxtMenuId);
	menus.hideMenuItem(removeControlPointCxtMenuId);
	if(type === 'control' && targetIsEdge){
	menus.showMenuItem(addControlPointCxtMenuId);
	menus.hideMenuItem(addBendPointCxtMenuId);
	}
	else if(type === 'bend' && targetIsEdge){
	menus.showMenuItem(addBendPointCxtMenuId);
	menus.hideMenuItem(addControlPointCxtMenuId);
	}
	else if (targetIsEdge){
	menus.showMenuItem(addBendPointCxtMenuId);
	menus.showMenuItem(addControlPointCxtMenuId);
	}
	else {
	menus.hideMenuItem(addBendPointCxtMenuId);
	menus.hideMenuItem(addControlPointCxtMenuId);
	}
	anchorPointUtilities.currentCtxPos = cyPos;
	}
	// clicked on an anchor
	else {
	menus.hideMenuItem(addBendPointCxtMenuId);
	menus.hideMenuItem(addControlPointCxtMenuId);
	if(type === 'control'){
	menus.showMenuItem(removeControlPointCxtMenuId);
	menus.hideMenuItem(removeBendPointCxtMenuId);
	if (opts.enableMultipleAnchorRemovalOption &&
	edge.hasClass('edgecontrolediting-hasmultiplecontrolpoints')) {
	menus.showMenuItem(removeAllControlPointCtxMenuId);
	}
	}
	else if(type === 'bend'){
	menus.showMenuItem(removeBendPointCxtMenuId);
	menus.hideMenuItem(removeControlPointCxtMenuId);
	}
	else{
	menus.hideMenuItem(removeBendPointCxtMenuId);
	menus.hideMenuItem(removeControlPointCxtMenuId);
	menus.hideMenuItem(removeAllControlPointCtxMenuId);
	}
	anchorPointUtilities.currentAnchorIndex = selectedIndex;
	}
	anchorPointUtilities.currentCtxEdge = edge;
	});

[hasanbalci]

Hi @zoulayabd,
You're right. Currently, context-menus extension has a evtType option but edge-editing extension is stick to the right-click. To solve this issue, we can expose the evtType option in the context-menus and then use it automatically in this extension. In this way, event type that is defined in context-menus will be available for edge-editing as well. We'll solve that when we have time.

[canbax]

@zoulayabd With the last commits (c09acb3), it uses evtType of context-menus extension. Please check and close the issue if it's OK. (It is the unstable branch)

[zoulay]

@canbax thanks for your actions , i tried the solution on the unstable branch , but it give me this error :
ERROR TypeError: G.getOptions is not a function
init cytoscape-edge-editing.js:1

[canbax]

@zoulay You also need to use the latest unstable context-menus This extension uses context-menus

[zoulay]

@canbax yes it works thanks ,
do you know when it will be released ?

[canbax]

@zoulay That's great! I don't know when

[zoulay]

@canbax you didn't always know the date of release ? or a fix version that we can use on our project ?

[zoulay]

@canbax @hasanbalci , could you push a fix version that we can use on our project angular , Thanks for your actions

[canbax]

@zoulay Inside the "package.json" file, you can the link to the unstable branch.

For example "cytoscape-edge-editing": "github:iVis-at-Bilkent/cytoscape.js-edge-editing#unstable",

[zoulay]

@canbax we can't deliver in production with this branch , could you please make a fix or release version

[canbax]

I don't know when a release will happen or about a hotfix in the master branch. @hasanbalci and @ugurdogrusoz might help.

[hasanbalci]

Hi @zoulay,
There have been many changes since the latest release of this extension, so we need to test it thoroughly before a new release. However, we currently don't have enough resources for that operation. If you want to use this unstable version, you can make your own release from a fork of this extension.

Please note that this extension uses context-menus extension as an optional dependency and the current changes in the unstable branch is also dependent to the changes in the unstable branch of context-menus extension. Therefore, you may need to make a release of the unstable branch of context-menus extension as well.